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

});

このコードを実装して、jsonデータを使用してレーダーチャートを作成しました。ここでは、jsonデータ形式です。

{
"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"
    },

]
}

今、私は各ノードポイントにツールチップを置きたいです..しかし、私はどの体が助けることができるかについてのアイデアを得ることができませんか？

4

1 に答える 1

0

D3 http://markhansen.co.nz/stolen-vehicles-pt2/を使用して SVG で実行されている Twitter Bootstrap ツールチップの例を次に示します。

新しいバージョンで動作させるには、Why doesn't Twitter Bootstrap popover work with SVG elements? を参照してください。2.3.0 以降のバージョンのブートストラップまたはそのスレッドに投稿した修正を使用する必要があります。

于 2013-01-31T22:33:41.037 に答える