D3.js线图工具提示点

时间:2016-12-06 09:35:57

标签: javascript d3.js

我想将工具提示添加到this图表。 我指的是thisthis示例

问题是它们在SVG中没有唯一的点,只有路径标记。

 svg.selectAll("dot")   
    .data(data)         
.enter().append("circle")                               
    .attr("r", 5)       
    .attr("cx", function(d) { return x(d.date); })       
    .attr("cy", function(d) { return y(d.close); })     
    .on("mouseover", function(d) {      
        div.transition()        
            .duration(200)      
            .style("opacity", .9);      
        div .html(formatTime(d.date) + "<br/>"  + d.close)  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                  
    .on("mouseout", function(d) {       
        div.transition()        
            .duration(500)      
            .style("opacity", 0);   
    });

与上面的代码一样,选择SVG上的点,但我没有任何特定的元素来绑定工具提示。

任何人都可以帮助我,因为我是d3.js的新手。

1 个答案:

答案 0 :(得分:1)

你应该为y:

取d.value
.attr("cy", function(d) { return y(d.value); })  

现在在mouseover上添加新元素:

.on("mouseover", function(d) {      
        svg.append("text")
          .text(d.value)
          .attr('class', 'tooltip').style("font-size","10px")
          .attr("x", x(d.date))
          .attr("y", y(d.value))
          .attr('fill', 'red');
        })                  
    .on("mouseout", function(d) {       
        d3.selectAll('.tooltip').remove();
    });