Question

我在D3中使用the motion chart的模板来创建类似的东西。它有效，但我需要做更多的工作。有一件事是显示包含所有x，y和radius信息的工具提示。我希望当鼠标在每个气泡上移动时显示工具提示。有谁知道这是怎么做到的吗？谢谢。您可以在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，这可能不是世界上最好的主意。 The answer that Lars linked to uses SVG's built-in title, which shows up as a tooltip。

您可以在图表中轻松完成此操作，方法是在.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添加工具提示：

添加你可以从here

获取的jquery和tipsy 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" />

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

// 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;
}

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

2 个答案: