Click table, update line, hover over line, update table

Question

I\'m new to D3, but loving it so far. But I know my solutions lack... elegance.

I am trying to have 2 controls, a table and a graph displaying the data represented b

Answer 1

I have been referring this since i wanted to achieve the same thing in angular2 using d3. Here is my code...

  private drawLine() {
    this.line = d3Shape.line()
        .y((d: any) => this.y(d.rank))
        .defined(function(d : any) { return d.rank})
        .x((d: any) => this.x(d.year));

   var color = function(i) {
        var colors = ["#35559C","#D9469C","#70D45B","#915ABB","#FF7C26","#50C5F6","#ECBE4B"];
        return colors[i % colors.length];
    };

    var i = 0;
    var j=1;
    for(let d of this.lineData){
        this.g.append('path')
            .attr('d', this.line(d.values))
            .attr("class", "line")
            .attr("stroke", color(i))
            .attr("transform", "translate(0,"+this.margin.top+")")
            .attr("id","row-"+j)
            .on("mouseover",function(){
                d3.select(this)
                    .attr("class","line1");
                d3.select("tr#"+this.id)
                    .style("background-color","gainsboro")
                //console.log( d3.select("tr#"+this.id))
            })
            .on('mouseout', function(){
                d3.select(this)
                    .attr("class","line");
                d3.select("tr#"+this.id)
                    .style("background-color","")
            });

            j++;
            i++;
            if(i > 9) {
                i = 0;
            }
  }
}
private mouseover(event){
d3.select(event.currentTarget)
    .style("background-color","gainsboro")
d3.select("path#"+event.currentTarget.id)
    .attr("class","line1");

}

private mouseout(event){
d3.select(event.currentTarget)
    .style("background-color","")
d3.select("path#"+event.currentTarget.id)
    .attr("class","line");
}

while creating line i assigned id to it and the same id to every row in table.

    
        

          {{object[column.id] | trim}}
        
        

          {{object[column.id]}}
        
    
  

and called the mouseover and mouseout function in table row. I would like to have some recommendations if m wrong somewhere.. :)