我正在尝试为我的折线图创建一个工具提示,将虚线发送到x和y轴(与此d3 n00b示例相同,但我的图表有多行)http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html
我尝试设置两个焦点小组,尝试将额外的行信息添加到现有组中,但我能得到的只是在两行上运行的日期,但虚线和数据信息仅适用于一个。
任何帮助都将被感激地接受。
下面的代码是下面的代码: http://bl.ocks.org/anonymous/d1dbc221f95f6308b351
答案 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
,即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);
答案 1 :(得分:0)
现在已修复,重命名两个焦点小组