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

时间:2015-08-12 08:42:25

标签: d3.js

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

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

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

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

2 个答案:

答案 0 :(得分:0)

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

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,即focus1focus2

编辑更新:

据我了解,您现在已将text.y1text.y2text.y3text.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);

答案 1 :(得分:0)

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

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