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

Question

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

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。而不是那个，您想要获取@987654324 的索引@你悬停在上面。

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

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，可以看到“工具提示”总是显示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。只需绑定数据。这样，事情就清楚了，不会意外中断。