使用d3.js在雷达图中实现工具提示

Question

var margin = {top: 30, right: 20, bottom: 30, left: 70},
h= 500;
w = 960;
ruleColor = "#CCC";
minVal = 0;
maxVal = 100;
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var viz = d3.select("#radar")
    .append('svg:svg')
    .attr('width', w)
    .attr('height', h)
    .attr('class', 'vizSvg');

viz.append("svg:rect")
    .attr('id', 'axis-separator')
    .attr('x', 0)
    .attr('y', 0)
    .attr('height', 0)
    .attr('width', 0)
    .attr('height', 0);

vizBody = viz.append("svg:g")
    .attr('id', 'body');

var heightCircleConstraint = 500 - margin.top - margin.bottom;
var widthCircleConstraint =  width = 960 - margin.left - margin.right,
circleConstraint = d3.min([heightCircleConstraint, widthCircleConstraint]);
var radius = d3.scale.linear().domain([minVal, maxVal]).range([0, (circleConstraint  / 2)]);
var radiusLength = radius(maxVal);
var centerXPos = widthCircleConstraint / 2 + margin.left;
var centerYPos = heightCircleConstraint / 2 + margin.top;

vizBody.attr("transform",
  "translate(" + centerXPos + ", " + centerYPos + ")");

d3.json("data/radar.json", function(error, data) {
    var hours = [];
    var series = [[]];
    data.QualitySummaryObject.forEach(function(d,i) {
        series[0][i] = d.extractPercentage;
        hours[i] = d.extractorName;
    });
    for (i = 0; i < series.length; i += 1) {
        series[i].push(series[i][0]);
    }
    //console.log(series.length);
    var radialTicks = radius.ticks(5);

    vizBody.selectAll('.circle-ticks').remove();
    vizBody.selectAll('.line-ticks').remove();
    var circleAxes = vizBody.selectAll('.circle-ticks')
      .data(radialTicks)
      .enter().append('svg:g')
      .attr("class", "circle-ticks");
    circleAxes.append("svg:circle")
      .attr("r", function (d, i) {
          return radius(d);
      })
      .attr("class", "circle")
      .style("stroke", ruleColor)
      .style("fill", "none");
    circleAxes.append("svg:text")
      .attr("text-anchor", "middle")
      .attr("dy", function (d) {
          return -1 * radius(d);
      })
      .text(String);

    var lineAxes = vizBody.selectAll('.line-ticks')
      .data(hours)
      .enter().append('svg:g')
      .attr("transform", function (d, i) {
          return "rotate(" + ((i / hours.length * 360) - 90) +
              ")translate(" + radius(maxVal) + ")";
      })
      .attr("class", "line-ticks");

    lineAxes.append('svg:line')
      .attr("x2", -1 * radius(maxVal))
      .style("stroke", ruleColor)
      .style("fill", "none");
    lineAxes.append('svg:text')
      .text(String)
      .attr("text-anchor", "middle")
      .attr("transform","translate(15) rotate(90)");

    //var highlightedDotSize = 4;
    var groups = vizBody.selectAll('.series').data(series);
    //console.log(hours.length);
    groups.enter().append("svg:g")
    .attr('class', 'series')
      .style('fill', "green")
      .style('stroke',"#ccc");    
    //groups.exit().remove();
    //console.log(Math.PI);
    var lines = groups.append('svg:path')
      .attr("class", "line")
      /*.attr("d", d3.svg.line.radial()
          .radius(function (d) {
              return 10;
          })
          .angle(function (d, i) {
              if (i == hours.length) {
                  i = 0;
              } //close the line
              return (i / hours.length) * 2 * Math.PI;
          }))*/
      .style("stroke-width", 1)
      .style("fill", "rgba(124,240,10,0.1)");
      /*groups.selectAll(".curr-point")
      .data(function (d) {
          return [d[0]];
      })
      .enter().append("svg:circle")
      .attr("class", "curr-point")
      .attr("r", 0);

  groups.selectAll(".clicked-point")
      .data(function (d) {
          return [d[0]];
      })
      .enter().append("svg:circle")
      .attr('r', 0)
      .attr("class", "clicked-point");*/

  lines.attr("d", d3.svg.line.radial()
      .radius(function (d) {

          return radius(d);
      })
      .angle(function (d, i) {
          if (i === hours.length) {
              i = 0;
          } //close the line
          return (i / hours.length) * 2 * Math.PI;
      }));

});

i implemented this code to create radar chart with a json data here is the json data format

{
"QualitySummaryObject": [
    {
        "extractPercentage": 68.81964,
        "extractorName": "Classification"
    },
    {
        "extractPercentage": 74.09091,
        "extractorName": "Keyword Match"
    },
    {
        "extractPercentage": 54.62963,
        "extractorName": "LocationBroadcast"
    },
    {
        "extractPercentage": 98.91892,
        "extractorName": "Qualification"
    },
    {
        "extractPercentage": 98.76923,
        "extractorName": "User Profile Location"
    },
    {
        "extractPercentage": 80.15909,
        "extractorName": "Valid Person Name"
    },

]
}

Now i want to put tooltip on each node point .. but i am not able to get any idea how to do that any body can help?

Answer 1

Here is an example of Twitter Bootstrap tooltips running on SVGs with D3 http://markhansen.co.nz/stolen-vehicles-pt2/

To get it working on newer versions see Why doesn't Twitter Bootstrap popover work with SVG elements? You'll need to use a 2.3.0+ version of bootstrap or the fix I posted in that thread.