如何将悬停（工具提示）添加到D3。 气泡运动图？

Question

我在D3中使用动态图表的模板来创建类似的内容。 它可以工作，但是我需要做更多的工作。 一件事是显示工具提示，其中包含所有x，y和半径信息。 我希望当鼠标移过每个气泡时显示工具提示。 有谁知道这是怎么做到的吗？ 谢谢。 您可以在https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/nations/index.html上找到源页面

这是我所做的：

    var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

    tooltip.text("my tooltip text");

    var dots = svg.append("g")
        .attr("class", "dots");

    var dot = dots.selectAll(".dot")
        .data(interpolateData(1990))
        .enter().append("circle")
        .attr("class", "dot")
        .style("fill", function (d) {
            return colorScale(color(d));
        })
        .on("mouseover", function(d){return tooltip.style("visibility", "visible");})
        .on("mousemove", function(d){return tooltip.style("top",(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
        .on("mouseout", function (d){return tooltip.style("visibility", "hidden");})

Answer 1

您正在尝试混合使用SVG和HTML，这可能不是世界上最好的主意。 Lars链接到的答案使用SVG的内置标题，该标题显示为工具提示 。

通过在.call(position)之后添加以下调用，您可以轻松地在图表中完成此操作：

.append('svg:title')
.text(function(d) { return d.name; });

如果您坚持将HTML混入SVG组合中，则可以从mouseover事件处理程序内部设置tooltip.text：

.on("mouseover", function(d){ 
  tooltip.text(d.name); 
  return tooltip.style("visibility", "visible");
})

该jsbin包含两种方法： http ://jsbin.com/zexiz/2/edit?js,output

Answer 2

要使用tipsy添加工具提示：

添加可以从此处获取的jQuery和技巧性的CSS

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="jquery.tipsy.js"></script>
<link href="tipsy.css" rel="stylesheet" type="text/css" />

然后在添加点的代码之后放置小巧的位

// Add a dot per nation. Initialize the data at 1800, and set the colors.
var dot = svg.append("g")
      .attr("class", "dots")
    .selectAll(".dot")
      .data(interpolateData(1962))
    .enter().append("circle")
      .attr("class", "dot")
      .style("fill", function(d) { return colorScale(color(d)); })
      .call(position)
      .sort(order);


  //tipsy tooltip
  $('circle').tipsy({ 
    gravity: $.fn.tipsy.authEW, 
    html: true,
    title: function() { 
    var d = this.__data__, c = d.name;
    return d.name; }});

您必须调整在bost.ocks.org上使用的style.css，以使工具提示出现在正确的位置

.ocks-org body {
  background: #fcfcfa;
  color: #333;
  font-family: "PT Serif", serif;
  /* margin: 1em auto 4em auto; this screws up tooltips*/
  position: relative;
  width: 960px;
}