2016-12-06 168 views
0

我想將工具提示添加到this折線圖。 我指的是thisthis示例D3.js折線折線圖工具提示

問題是,它們在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

你應該採取d.value爲Y:

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

,現在鼠標懸停上添加新的元素:

.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(); 
    }); 
+0

........我想你的解決方案,但得到這個錯誤...不能讀取未定義的屬性'值'[這裏是你的解決方案的代碼](https://codepen.io/7deepakpatil/pen/ObvqXX?editors=0010) – Rakesh

+0

沒有。 'cy' for circles。這裏的小提琴:https://jsfiddle.net/tomatetz/qLoa4kq0/2/ –