javascript - d3.v4.js Line Graph Interactive Legend - 仅适用于第一行

Question

我有一个多线图，我正在尝试创建一个交互式图例，当您单击每个名称时，它会禁用相应的线。它仅适用于第一个。这是我的代码 example :

svg.append("text")
          .attr("x", (legendSpace / 2) + i * legendSpace) // space legend
          .attr("y", height + (margin.bottom / 2) + 5)
          .attr("class", "legend") // style the legend
          .style("fill", function() { // Add the colours dynamically
            return d.color = color(d.key);
          })
          .on("click", function() {
            // Determine if current line is visible 
            var active = d.active ? false : true,
              newOpacity = active ? 0 : 1;
            // Hide or show the elements based on the ID
            d3.select("#tag" + d.key.replace(/\s+/g, ''))
              .transition().duration(100)
              .style("opacity", newOpacity);
            // Update whether or not the elements are active
            d.active = active;
          })
          .text(d.key);

还有，我有这个 plunker使用我的可视化(数据只是数据集的一小部分)。
提前谢谢你。

Answer 1

通常在 d3 中用 foreach 循环追加东西不是更好的选择。这就是你遇到困难的原因。

传说中第一个国家是阿尔巴尼亚，传说中只有阿尔巴尼亚起作用。为什么？因为图表中的每条路径都有相同的id(阿尔巴尼亚的id):

因此，当点击图例中的 Albania 时，点击函数会搜索带有 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 > 是第零项 - 阿尔巴尼亚。因此，由于所有路径都附加在第一个循环中，因此所有路径共享相同的 id:

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

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

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

由于数据是数组 countries 中的项目，而不是此处的 dataNest，我已将属性 key 替换为属性 name

这是一个 updated plunkr .

---

更好的是，我们可以通过完全删除循环来使 d3 更加地道，参见 plunkr .