具有鼠標(biāo)懸停工具提示的多重系列折線圖我使用這個(gè)bl.ocks.org代碼示例創(chuàng)建了一個(gè)多系列折線圖。我已經(jīng)設(shè)法在JSFiddle上重新創(chuàng)建它?,F(xiàn)在,我正在嘗試添加一個(gè)x值鼠標(biāo)懸停工具提示,當(dāng)您懸停其垂直位置時(shí),它會(huì)顯示每行的工具提示。事情是這樣的,但對(duì)于多行。我發(fā)現(xiàn)這個(gè)StackOverflow答案(它包括一個(gè)JSFiddle),但我似乎無法使它與我的多重系列折線圖一起工作。svg.append("path") // this is the black vertical line to follow mouse
.attr("class","mouseLine")
.style("stroke","black")
.style("stroke-width", "1px")
.style("opacity", "0");var mouseCircle = causation.append("g") // for each line, add group to hold text and circle
.attr("class","mouseCircle"); mouseCircle.append("circle") // add a circle to follow along path
.attr("r", 7)
.style("stroke", function(d) { console.log(d); return color(d.key); })
.style("fill","none")
.style("stroke-width", "1px"); mouseCircle.append("text")
.attr("transform", "translate(10,3)"); // text to hold coordinatesvar bisect = d3.bisector(function(d)
.attr('width', width) // can't catch mouse events on a g element
.attr('height', height)
.attr('fill', 'none')
.attr('pointer-events', 'all')
.on('mouseout', function(){ // on mouse out hide line, circles and text
d3.select(".mouseLine")
.style("opacity", "0");
d3.selectAll(".mouseCircle circle")
.style("opacity", "0");
d3.selectAll(".mouseCircle text")
.style("opacity", "0");
})
.on('mouseover', function(){ // on mouse in show line, circles and text
d3.select(".mouseLine")
.style("opacity", "1");
d3.selectAll(".mouseCircle circle")
.style("opacity", "1");
d3.selectAll(".mouseCircle text")
.style("opacity", "1");
})
});所以,簡單地說,我想將我的折線圖JSFiddle與這個(gè)工具提示JSFiddle結(jié)合起來。有人知道怎么做這個(gè)嗎?或者是否有更簡單的方法來創(chuàng)建這樣的工具提示?任何幫助表示贊賞!
添加回答
舉報(bào)
0/150
提交
取消