我是 D3 的新手，但到目前为止我很喜欢它。但我知道我的解决方案缺乏……优雅。
我试图有 2 个控件，一个表格和一个显示表格单元格表示的数据的图表。如果单击表格上的单元格，则相关行应突出显示。如果将鼠标悬停在一行上，关联的表格单元格将改变颜色。最终将有第三个控件显示特定于该单元的详细数据。不幸的是，如果我使用对更新函数的静态调用，我只能成功地完成这项工作。如果我试图变得聪明和充满活力，那么整个事情就会崩溃。
我已尽力在下面尽量减少我的示例。 Click table->update 行之所以有效，是因为对更新所有内容的 SelectData() 的调用使用常量数据。但是，在线上的鼠标悬停不起作用。最终我也需要表格更加动态，但现在我该如何解决这个问题？
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.lineDefault {
fill: none;
stroke: red;
stroke-width: 1.5px;
stroke-dasharray: 4,4;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<div id="wrap">
<table>
<tr>
<td id="dataBlock" onclick="SelectData(0)">1</td>
<td id="dataBlock" onclick="SelectData(1)">2</td>
</tr>
<tr>
<td id="dataBlock" onclick="SelectData(2)">3</td>
<td id="dataBlock" onclick="SelectData(3)">4</td>
</tr>
</table>
<div>
<svg class="chart"></svg>
</div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 600, height = 600;
var maxx = 100,
maxy = 100;
var linedata = {};
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 activeElement = 0;
var graphlines = {};
var numlines = 0;
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]); });
for (var i = 0; i < 4; i++) {
graphlines[i] = chart
.append("path")
.datum(linedata[i])
.attr("class", "lineDefault")
.attr("id", "linedata")
.attr("d", line)
.on("mouseover", SelectData(i));
numlines++;
}
function SelectData(n) {
d3.selectAll("td").transition()
.style("background-color", function(d, i) {
return i == n ? "#c99" : "#fff";
});
activeElement = n;
for (var i = 0; i<numlines; i++) {
if (i == n) {
graphlines[i]
.style("stroke-dasharray", "1,0")
.transition()
.style("stroke-width", "3")
.style("stroke", "steelblue");
} else {
graphlines[i]
.style("stroke-dasharray", "4,4")
.transition()
.style("stroke-width", "1.5")
.style("stroke", "red");
}
}
}
</script>
鼠标单击表格会影响线条，鼠标悬停在线条上不会影响表格。我也将接受任何对我的优雅的影响以及修复它们的指示。
