Question

我想使用this tooltip中的this answer，但我无法弄清楚如何将数据绑定到它。

在此示例中，我希望有两个圆圈，悬停时将其大小值显示为文字。

watch.csv

circle,size
green,5
yellow,10

码

d3.csv("watch.csv", function(error, watch) {

  var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text(function(d) { return d.size; })    //TRYING THIS

  var sampleSVG = d3.select(".example_div")
    .append("svg:svg")
    .attr("class", "sample")
    .attr("width", 300)
    .attr("height", 300);

  d3.select(".example_div svg")
    .data(watch)                  //AND THIS
    .enter()                      
    .append("svg:circle")
    .attr("stroke", "black")
    .attr("fill", "aliceblue")
    .attr("r", 30)
    .attr("cx", 52)
    .attr("cy", 52)
    .on("mouseover", function() {
      return tooltip.style("visibility", "visible");
    })
    .on("mousemove", function() {
      return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
    })
    .on("mouseout", function() {
      return tooltip.style("visibility", "hidden");
    });


});

Plunker

Answer 1

为此更改工具提示var：

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

使用选择器.someTooltip在CSS中设置工具提示的样式。

并改变你所有的＆＃34; mouseove＆＃34;，＆＃34; mousemove＆＃34;和＃34; mouseout＆＃34;为此：

.on("mousemove", function(d) {
     tooltip.html("The size is: " + d.size)
    .style("top", (d3.event.pageY - 10) + "px")
    .style("left", (d3.event.pageX + 10) + "px")
    .style("opacity", 1);
}).on("mouseout", function(){
    tooltip.style("opacity", 0);
});

Answer 2

首先你需要添加jquery和tipsy这是一个jquery插件。

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.3/jquery.tipsy.js"></script>

tipsy css

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.3/jquery.tipsy.css" rel="stylesheet" type="text/css" />

接下来，您需要将数据绑定到像这样的tipy jquery方式。

$('svg circle').tipsy({ //select all circles
    gravity: 'w', 
    html: true, 
    title: function() {
      var d = this.__data__;//get the data from the dom
      return 'Hi there! My color is <span style="color:' + d.circle + '">' + d.size + '</span>'; //make the tipsy tool tip using the data
    }
  });

删除所有不需要的工具提示代码：

 .on("mouseover", function() {
      return tooltip.style("visibility", "visible");
    })
    .on("mousemove", function() {
      return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
    })
    .on("mouseout", function() {
      return tooltip.style("visibility", "hidden");
    });

删除此

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text(function(d) { return d.size; })    //TRYING THIS

因此，您的代码将如下here

D3将数据绑定到SVG工具提示

2 个答案: