在d3.js折線圖中永久顯示工具提示

Question

我正在使用d3.js製作折線圖。鼠標懸停時會顯示一個點的工具提示，並在鼠標懸停時消失。我想在創建圖表時將所有工具提示永久顯示在一起。有沒有辦法做到這一點？

我的Javascript成爲

var x = d3.time.scale().range([0, w]); 
var y = d3.scale.linear().range([h, 0]);  
x.domain(d3.extent(data, function(d) { return d.x; })); 
y.domain(d3.extent(data, function(d) { return d.y; })); 

var line = d3.svg.line() 

    .x(function(d) { 
    return x(d.x); 
    }) 

    .y(function(d) { 
    return y(d.y); 
    }) 

var div = d3.select("body").append("div") 
      .attr("class", "tooltip") 
      .style("opacity", 0); 

var graph = d3.select("#graph").append("svg:svg") 
      .attr("width", 900) 
      .attr("height", 600) 
      .append("svg:g") 
      .attr("transform", "translate(" + 80 + "," + 80 + ")"); 


var xAxis = d3.svg.axis().scale(x).ticks(10).orient("bottom"); 

var yAxisLeft = d3.svg.axis().scale(y).ticks(10).orient("left"); 

var area = d3.svg.area() 
.x(function(d) { return x(d.x); }) 
.y0(h) 
.y1(function(d) { return y(d.y); }); 

graph.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("class", "circle") 
    .attr("cx", function (d) { return x(d.x); }) 
    .attr("cy", function (d) { return y(d.y); }) 
    .attr("r", 4.5) 
    .style("fill", "black") 
    .on("mouseover", function(d) { 
    div.transition() 
    .duration(200) 
    .style("opacity", .9); 
    div 
    .html(d.y) + "<br/>" + d.x) 
    .style("left", (d3.event.pageX) + "px") 
    .style("top", (d3.event.pageY - 30) + "px"); 
    }) 
    .on("mouseout", function(d) { 
    div.transition() 
    .duration(500) 
    .style("opacity", 0); 
    }); 

Answer 1

標記每個數據點，你可以在適當的位置添加text元素。代碼看起來像這樣。

graph.selectAll("text").data(data).enter() 
    .append("text") 
    .attr("x", function (d) { return x(d.x); }) 
    .attr("y", function (d) { return y(d.y) - 10; }) 
    .text(function(d) { return d.value; });