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

http://stackoverflow.com/questions/21469497/click-table-update-line-hover-over-line-update-dable

by Nivaldo

HTML

<div id="wrap">
    <table>
        <tr class="dataBlock">
            <td>1</td>
        </tr>
        <tr class="dataBlock">
            <td>2</td>
        </tr>
        <tr class="dataBlock">
            <td>3</td>
        </tr>
        <tr class="dataBlock">
            <td>4</td>
        </tr>
    </table>
    <div>
        <svg class="chart"></svg>
    </div>
</div>

CSS

.lineDefault {
    fill: none;
    stroke: red;
    stroke-width: 1.5px;
    stroke-dasharray: 4 4;
    transition: 0.5s;
    -webkit-transition: 0.5s;
}
.lineDefault.highlight {
    stroke-dasharray: 1 0;
    stroke-width: 3;
    stroke: steelblue;
}
tr {
    transition: 0.5s;
    -webkit-transition: 0.5s;
}
tr.highlight {
    background-color: #c99
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
svg, table {
    border: 1px solid;
}

JavaScript

var width = 600,
    height = 600;
var maxx = 100,
    maxy = 100;

var linedata = []; //data should be an array, not an object
linedata[0] = [
    [0, 50],
    [50, 60],
    [100, 100]
];
linedata[1] = [
    [0, 40],
    [40, 40],
    [100, 90]
];
linedata[2] = [
    [0, 20],
    [50, 30],
    [100, 90]
];
linedata[3] = [
    [0, 0],
    [60, 30],
    [100, 30]
];
var graphlines;

var chart = d3.select(".chart")
    .attr("viewBox", "0 0 600 600")
    .append("g");

var x = d3.scale.linear().domain([0, maxx]).range([0, width]);
var y = d3.scale.linear().domain([0, maxy]).range([height, 0]);

var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");

var line = d3.svg.line()
    .x(function (d) {
    return x(d[0]);
})
    .y(function (d) {
    return y(d[1]);
});

// You don't need a "for" loop, just use a d3 data join:
graphlines = chart.selectAll("path")
    .data(linedata);

graphlines.enter().append("path");

graphlines.attr("class", "lineDefault")
    .attr("d", line)
    .on("mouseover", SelectData);

d3.selectAll("tr.dataBlock")
    .on("click", SelectData);

function SelectData(d, i) {
    //We need to include "d", since the index will 
    //always be the second value passed in to the function
    
    console.log(i);

    d3.selectAll(".highlight")
        .classed("highlight", false);
    //remove the highlight class 
    //without changing any other classes 

    d3.select("tr.dataBlock:nth-of-type(" + (i+1) +")")
        .classed("highlight", true);
    d3.select("path.lineDefault:nth-of-type(" + (i+1) +")")
        .classed("highlight", true);
    //add the highlight class 
    //without changing any other classes 
}