javascript - 如何循环遍历数组以将 html 分配给工具提示

Question

我有一个折线图，我正在尝试将 html 添加到图例上的鼠标悬停/工具提示。我想遍历数组 (full_names)，以便在第一条图例行的工具提示中显示“full_names[0]”，第二行显示“full_names[1]”，等等。目前，它们都显示“full_names[0 ]'。为什么我的全名不能正确循环？

id_list 也是一个数组，我循环遍历它以按顺序分配 id。

我的传奇:

var lineLegend = svg.selectAll(".lineLegend").data(id_list)
        .enter().append("g")
        .attr("class", "lineLegend")
        .attr("id", function (d, i) { return id_list[i % id_list.length] 
        })
        .attr("transform", function (d, i) {
            return "translate(" + width + "," + (i * 20) + ")";
        })

        .on("click", function (id) {
            var this_chart = d3.select("#temperature_graph")
            var liney = this_chart.select("#" + id)
            var alldots = this_chart.selectAll("." + id)
            var isActive = liney.classed("active");
            var dotsActive = alldots.classed("active")
            console.log(liney)
            liney.classed("active", !isActive);
            alldots.classed("active", !dotsActive)
        })
        .on("mouseover", function (i) {
            div.transition()
                .duration(100)
                .style("opacity", .9);

我想在这里遍历数组 (full_names):

 div.html( function (d, i) { return full_names[i % full_names.length]})
                .style('color', '#404040')
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY - 28) + "px");
        })

其余的:

        .on("mouseout", function (d) {
            div.transition()
                .duration(500)
                .style("opacity", 0);
        });
 lineLegend.append("text").text(function (d) {
            return d;}).attr("transform", 
       "translate(-94,15)").style("font-family", "Sans- 
       Serif").style('fill', '#5a5a5a'); //align texts with boxes
 lineLegend.append("rect")
            .attr("fill", function (d, i) { return colors[i % 
       colors.length] })
            .attr("width", 12).attr("height", 10).attr("transform", 
       "translate(-32,4)").attr("rx", "3");

我认为我的数组可能存在作用域问题？如同，我可以正确地循环遍历 id_list，而不是 full_names。两个变量都是在同一个地方创建的。那是因为 id_list 包含在我的 var linelegend 中吗？

非常感谢!!

Answer 1

这里的问题是:html() 匿名函数中的 i 引用了 div 的索引，这将是始终为 0。取而代之的是，您想要获取悬停的 lineLegend 的索引。

这里有一些简单的例子。现在你正在这样做:

lineLegend.on("mouseover", function(d,i){
    tooltip.html(function(d,i){
        //here, 'i' is the index of the 'tooltip', always 0.
    });
});

如您所见，外部匿名函数中的索引与内部匿名函数中的索引不相同。

应该是:

lineLegend.on("mouseover", function(d,i){
    tooltip.html(function(){
        //here, 'i' is the index of the 'lineLegend'.
    });
});

或者，如果您想在 html() 匿名函数中使用参数，请为它们指定其他名称:

应该是:

lineLegend.on("mouseover", function(d,i){
    tooltip.html(function(e,j){//no 'i' here
        //here, 'i' is the 'lineLegend' index and 'j' the tooltip index
    });
});

这里有一些演示。首先，使用不正确的i，你可以看到“tooltip”总是显示name1:

var fullNames = ["name1", "name2", "name3"];

var tooltip = d3.select("#tooltip");

var p = d3.select("body")
  .selectAll(null)
  .data(["foo", "bar", "baz"])
  .enter()
  .append("p")
  .text(String);

p.on("mouseover", function(d, i) {
  tooltip.html(function(d, i) {
    return fullNames[i]
  })
})

#tooltip {
  width: 100%;
  background-color: wheat;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="tooltip">Tooltip</div>

现在相同的代码，引用正确的 i:

var fullNames = ["name1", "name2", "name3"];

var tooltip = d3.select("#tooltip");

var p = d3.select("body")
  .selectAll(null)
  .data(["foo", "bar", "baz"])
  .enter()
  .append("p")
  .text(String);

p.on("mouseover", function(d, i) {
  tooltip.html(function() {
    return fullNames[i]
  })
})

#tooltip {
  width: 100%;
  background-color: wheat;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="tooltip">Tooltip</div>

最后，一个建议:不要做你想做的事(使用元素的索引获取另一个数组中的值)，这不是惯用的 D3。只需绑定(bind)数据即可。这样，事情就清楚了，不会意外中断。