Question

我正在尝试为我的折线图创建一个工具提示，将虚线发送到x和y轴（与此d3 n00b示例相同，但我的图表有多行）http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html

我尝试设置两个焦点小组，尝试将额外的行信息添加到现有组中，但我能得到的只是在两行上运行的日期，但虚线和数据信息仅适用于一个。

任何帮助都将被感激地接受。

下面的代码是下面的代码： http://bl.ocks.org/anonymous/d1dbc221f95f6308b351

Answer 1

您对两个焦点小组使用相同的变量：

var focus = svg.append("g")                                // tooltip
    .style("display", "none");    

var focus = svg.append("g")                                // tooltip
    .style("display", "none");

命名一个变量focus1，另一个focus2，以确保它们保持独立。

我还建议重构代码，这样您就不必在这两个函数上调用完全相同的函数，一次用于CPI行，一次用于RPIJ行。相反，您应该创建一个在focus上调用所需函数的函数。您应该传递行要附加到的功能以及正确的focus group，即focus1和focus2。

编辑更新：

据我了解，您现在已将text.y1，text.y2，text.y3和text.y4添加到两个焦点小组，并且实际上隐藏通过在此处设置正确的strokes至#fff来获取不必要的信息：

// place the value at the intersection RPIJ
focus2.append("text")
    .attr("class", "y1")
    .style("stroke", "white")
    .style("stroke-width", "3.5px")
    .style("opacity", 0.8)
    .attr("dx", 8)
    .attr("dy", "-.3em");
focus2.append("text")
    .attr("class", "y2")
    .attr("dx", 8)
    .attr("dy", "-.3em");

// place the date at the intersection RPIJ
focus2.append("text")
    .attr("class", "y3")
    .style("stroke", "white")
    .style("stroke-width", "3.5px")
    .style("opacity", 0.8)
    .attr("dx", 8)
    .attr("dy", "1em");
focus2.append("text")
    .attr("class", "y4")
    .attr("dx", 8)
    .attr("dy", "1em");

然而，在这样做的过程中，你在每种情况下犯了几个独特的错误。

对于focus1，您在text.y4时根本不创建focus2，而是更新text.RPIJ而不是text.y3：

focus2.select("text.RPIJ")
      .attr("transform",
            "translate(" + x(d.date) + "," +
                           y(d.RPIJ) + ")")
      .text("£" + d.RPIJ);

Answer 2

现在已修复，重命名两个焦点小组

正确代码：http://bl.ocks.org/anonymous/b77e904f34aa2162e1df

带有虚线x / y轴线的D3工具提示无法创建多个工具提示

2 个答案: