How to add hover (tooltip) to the D3. bubble motion chart?

问题

I am using the template of the motion chart in D3 to create something similar. It works, but I need to do more work on it. One thing is to show the tooltip that contains all of x , y, and radius info in it. I want the tooltip to show up when the mouse moves over each bubble. Does anyone know how to do that? Thank you. The source page you can find at https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/nations/index.html

Here is what I did:

    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");})

回答1:

You're trying to mix SVG and HTML, which is probably not the best idea in the world. The answer that Lars linked to uses SVG's built-in title, which shows up as a tooltip.

You can easily accomplish this in your chart, by adding these calls after .call(position):

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

If you insist on mixing HTML into the SVG mix, you can set the tooltip.text from inside your mouseover event handler:

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

This jsbin contains both approaches: http://jsbin.com/zexiz/2/edit?js,output

回答2:

To add the toolstips using tipsy:

Add the jquery and tipsy css which you can grab from here

<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" />

Then after the code where the dots are added place the tipsy bits

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

You'll have to adjust the style.css which is used on bost.ocks.org to make the tooltips appear in the right place

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

来源：https://stackoverflow.com/questions/25313542/how-to-add-hover-tooltip-to-the-d3-bubble-motion-chart

标签

d3.js

tooltip