d3.v4.js折线图交互式图例 - 仅适用于第一行

Question

我有一个多线图，我试图创建一个交互式图例，当您点击每个名称时，它将禁用相应的行。它仅适用于第一个。以下是我via --override_repository的代码：

h2

另外，我有example我的可视化（数据只是数据集的一小部分）。
提前谢谢。

Answer 1

通常使用foreach循环附加内容不是d3中的首选选项。这就是你遇到困难的原因。

传奇中的第一个国家是阿尔巴尼亚，只有阿尔巴尼亚在传奇中起作用。为什么？因为图表中的每个路径都具有相同的ID（阿尔巴尼亚的ID）：

因此，当点击图例中的阿尔巴尼亚时，点击功能会搜索id为tagAlbania的行（并且仅查找第一个条目，因为ID应该是唯一的）并切换它。

您需要解决的关键问题是为什么您的所有路径都共享相同的ID。我们来看看你的代码：

  dataNest.forEach(function(d, i) {

    var country = plot.selectAll(".country")
      .data(countries)
      .enter().append("g")       
      .attr("class", "country");

    country.append("path")
      .attr("class", "line")
      .attr("id", 'tag' + d.key.replace(/\s+/g, '')) // assign ID
      .attr("d", function(d) {
        return line(d.values);
      })
      .style("stroke", function(d) {
        return color(d.name);
      });

在每次循环的第一次传递中，我们使用selectAll().data().enter().append()为每个国家/地区添加一个图表。当我们从空选中开始时，.enter().append()将为数据数组中的每个项创建一个元素：所有国家/地区的路径都是在第一次传递时绘制的。

在循环的第二遍中，输入选择为空 - 初始选择中有一个元素selectAll('.country')，用于数据数组中的每个项目。因此，在第一次循环之外的循环的每次迭代中都不输入和附加元素。

回顾第一个循环，我们可以看到d是数组dataNest中的一个项目，而在第一个循环中，d是第0个项目 - 阿尔巴尼亚。因此，当所有路径都附加在第一个循环上时，所有路径共享相同的id：

.attr("id", 'tag' + d.key.replace(/\s+/g, '')) // assign ID

要解决这个问题，我们可以简单地更改该行以访问要追加的行的数据：

 .attr("id", function(datum) { return 'tag' + datum.name.replace(/\s+/g, '') }) // assign ID

由于数据是数组国家/地区中的项目，而不是此处的dataNest，因此我已将属性key替换为属性name

这是一个updated plunkr。

更好的是，我们可以通过完全放弃循环来使d3更加惯用，请参阅plunkr。