реализовать подсказки в лепестковой диаграмме с d3.js

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 данные,реализовать подсказки в лепестковой диаграмме с d3.js

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

] 
}

Теперь я хочу поставить всплывающую подсказку на каждой узловой точке .. но я не могу понять, как это сделать, что может помочь любой орган?

источник

2013-01-29 Saurabh Sinha

Это может помочь: http://stackoverflow.com/questions/10805184/d3-show-data-on-mouseover-of-circle/10806220#10806220 –

@LarsKotthoff эй, где я помещаю эти круги ... пожалуйста guide me ... –

Идея состоит в том, чтобы добавить элемент 'svg: title' к каждому элементу, для которого вы хотите показать всплывающую подсказку. Это могут быть линии в вашем случае? –

Вот пример Twitter Bootstrap подсказки работает на SVGs с D3 http://markhansen.co.nz/stolen-vehicles-pt2/

Чтобы заставить его работать на более новые версии см Why doesn't Twitter Bootstrap popover work with SVG elements? Вы должны использовать версию начальной загрузки 2.3.0+ или исправить я отправил в этом потоке.

источник

2013-01-31 22:33:41

реализовать подсказки в лепестковой диаграмме с d3.js

ответ

Смежные вопросы