Question

当鼠标悬停在迷你图上时，我想将数组的值显示在工具提示中。我改编了http://bl.ocks.org/benjchristensen/1148374

的代码

我添加了以下代码，当鼠标悬停在迷你图上时，将数组值显示到工具提示中，但它只显示第一个索引值。

var tooltip = d3.select(id)
    .append("div")
    .attr("id","toolTip"+toolTipId)
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .style("background", "#6a7883")
    .style("color", "white")
    .style("height", "20px")
    .style("width", toolTipWidth)
    .style("text-align", "center")
    .style("font-size", "11px")
    .text("a simple tooltip");
    d3.select(id+" svg path")
    .data(arr)      
    .on("mouseover", function(d,i){tooltip.text(msgToolTipPrefix+" "+arr[i]+""+msgToolTipPostfix); return tooltip.style("visibility", "visible");})
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

Answer 1

在此特定示例中，该行由唯一的一个SVG路径（DOM元素）表示。 D3将数据绑定到DOM元素，而不绑定到路径段。这就是为什么你总能看到相同的数据。

您可以将行拆分为单独的可扩展段（例如this block）。结果，您将拥有一组SVG路径，并绑定了鼠标事件。您可以使用工具提示代码进行微调：

＆＃13;

path
   .on("mouseover", function(d) { tooltip.text("Hello "+d[0][1]+ "."); return tooltip.style("visibility", "visible");})
   .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
   .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

＆＃13;

请注意，您可能希望根据鼠标事件插入Y数据，据我所知，D3不会自动执行此操作（并且我不知道如何执行此操作，例如＆＃39; spline＆＃ 39;插值用于渲染线）。

如何将d3动画迷你图的值显示到工具提示中？

1 个答案: