Question

我正在使用d3.js制作折线图。鼠标悬停时会显示某个点的工具提示，并在mouseout上消失。我想在创建图表时永久显示所有工具提示。有办法吗？

我的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; });

在d3.js折线图中永久显示工具提示

1 个答案: