Как использовать текстовую переменную для метки d3 graphic

Я изучаю d3, я использую переменную «набор данных» для значений графического объекта, Я хочу использовать данные dataset.nombre для метки d3-графики, но я могу использовать только набор данных .numbers, это упрощенная версия коды:Как использовать текстовую переменную для метки d3 graphic

<body> 
    <div id="container2"></div> 
<script> 

var dataset = { 
    numbers: [15, 3, 10, 2, 14,17,1], 
    nombre:["a","b","c","d","e","f","g"] 
}; 

var color = d3.scale.category20(); 

var pie = d3.layout.pie() 
    .sort(null); 

var piedata = pie(dataset.apples); 

var arc = d3.svg.arc() 
    .innerRadius(radius - 100) 
    .outerRadius(radius - 50); 

var svg = d3.select("#container2").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var path = svg.selectAll("path") 
    .data(piedata) 
    .enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", arc); 

svg.selectAll("text").data(piedata) 
    .enter() 
    .append("text") 
    .attr("text-anchor", "middle") 
    .attr("x", function(d) { 
     var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2; 
     d.cx = Math.cos(a) * (radius - 75); 
     return d.x = Math.cos(a) * (radius - 20); 
    }) 
    .attr("y", function(d) { 
     var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2; 
     d.cy = Math.sin(a) * (radius - 75); 
     return d.y = Math.sin(a) * (radius - 20); 
    }) 
    .text(function(d) { return d.value; }) 
    .each(function(d) { 
     var bbox = this.getBBox(); 
     d.sx = d.x - bbox.width/2 - 2; 
     d.ox = d.x + bbox.width/2 + 2; 
     d.sy = d.oy = d.y + 5; 
    }); 

svg.append("defs").append("marker") 
    .attr("id", "circ") 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("refX", 3) 
    .attr("refY", 3) 
    .append("circle") 
    .attr("cx", 3) 
    .attr("cy", 3) 
    .attr("r", 3); 

svg.selectAll("path.pointer").data(piedata).enter() 
    .append("path") 
    .attr("class", "pointer") 
    .style("fill", "none") 
    .style("stroke", "black") 
    .attr("marker-end", "url(#circ)") 
    .attr("d", function(d) { 
     if(d.cx > d.ox) { 
      return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy; 
     } else { 
      return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy; 
     } 
    }); 

    </script> 

</body>

источник

2015-07-31 gurrumo

в идеале нужен иметь объекты вместо цифр, как данные, которые вы передаете макет пироги; то вы сможете напрямую использовать данные. В вашем случае, вы можете сделать это с помощью индекса:

.text(function(d, i) { return dataset.nombre[i]; })

Полных демо here.

источник

2015-07-31 03:21:16

thx очень, работа – gurrumo

Как использовать текстовую переменную для метки d3 graphic

ответ

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