d3.js查询动态折线图

Question

我是D3的新手。如果有人回答我的疑虑，将不胜感激：

单击单选按钮时，我将使用以下代码更新折线图

d3.selectAll(".line").attr("d", line);

但是，这会更新页面上显示的所有折线图。如何更新与此特定图形对应的行。

Answer 1

假设你有一系列图表：

var charts = d3.selectAll('.line').data(data);
charts.enter().append('path').attr('class', 'line').attr('d', line);

要使用特定图表，只需filter图表选择：

var chart;
chart = charts.filter(function(d) { d.name === selectedGraph; });
// or
chart = charts.filter('#chart-' + selectedGraph)

Answer 2

您必须以某种方式标记每个图表，然后在选择中使用它。 在每个图表＃chart-1，＃chart-2，...，＃chart-n

上设置ID

选择如下：

d3.selectAll("#chart-1 .line").attr("d", line);

或

d3.select("#chart-1").selectAll(".line").attr("d", line);

使用第二个，您可以存储图表并在以后使用它，然后更有效：

var chart1 = d3.select("chart-1");
// ...possibly other code
chart1.selectAll(".line").attr("d", line);