D3.js将文字放在圆环图中的圆弧上

Question

我正在尝试将文本放在圆环图上，内圈用D3创建。 可以在这里访问plunker代码： plunker

为了将文本放在弧上，我想访问donutData数组并将值放在图表的每个环上。

gs.append("text")
.attr("transform", function(d){
    return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d,i){
    return donutData[i];
});

由于donutData数组存储了用于创建圆环图的“实际”和“预测”的值，我希望将这些值放在图表中的每个弧上。

Answer 1

要将标签添加到圆弧的中心，您需要将标签添加到质心。

gs.selectAll('text').data(function(d) {
    return pie(d);
  })
  .enter().append("text")
  .attr("transform", function(d, i, j) {//calculating the d as done in the path
    k = arc.innerRadius(30 + donutWidth * j).outerRadius(donutWidth * (j + 1))(d);;
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("dy", ".35em")
  .style("text-anchor", "middle")
  .text(function(d) {
    return d.data;
  });

在这里工作代码

希望这可以帮助！

Answer 2

您必须对弧路径和标签进行分组。

var gs = chart1.selectAll("g").data(donutData).enter().append("g");

var groups = gs.selectAll('.arc') //Created groups 
    .data(function(d) {
        return pie(d);
    })
    .enter().append("g").classed("arc", true);

path = groups.append('path') //Append paths
    .attr('d', function(d, i, j) {
        return arc.innerRadius(30 + donutWidth * j).outerRadius(donutWidth * (j + 1))(d);
    })
    .attr('fill', function(d, i) {
        return color(i);
    })
    .on("mouseover", function(d) {
        d3.select(this).select("path").transition()
            .duration(200)
            .attr("d", arcOver);
    })
    .on("mouseout", function(d) {
        d3.select(this).select("path").transition()
            .duration(100)
            .attr("d", arc);
    });

groups.append("text") //Add labels
    .attr("transform", function(d, i, j) {
        var arc1 = arc.innerRadius(30 + donutWidth * j).outerRadius(donutWidth * (j + 1));
        return "translate(" + arc1.centroid(d) + ")";
    })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d, i) {
        return d.data
    });

 // Code goes here (function() { var margin = { top: 30, right: 30, bottom: 70, left: 40 }, width = 580 - margin.left - margin.right, height = 560 - margin.top - margin.bottom, donutWidth = 100 inner = 70; radius = Math.min(width, height) / 2; var color = d3.scale.category10(); var pie = d3.layout.pie() //.value(function(d){ return d.count;}) .sort(null); var arc = d3.svg.arc(); //.innerRadius(radius - donutWidth) //.outerRadius(radius - 50); var arcOver = d3.svg.arc() .innerRadius(inner + 5) .outerRadius(radius + 5); var chart1 = d3.select("#chartArea1").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); /* d3.csv("data.csv", function(error, data) { if (error) throw error;*/ var data = [{ "Class": "Class A", "Actual_Class": 495, "Predicted_Class": 495, "Accuracy": 100 }, { "Class": "Class B", "Actual_Class": 495, "Predicted_Class": 492, "Accuracy": 99 }, { "Class": "Class C", "Actual_Class": 495, "Predicted_Class": 495, "Accuracy": 100 }, { "Class": "Class D", "Actual_Class": 495, "Predicted_Class": 495, "Accuracy": 100 }, { "Class": "Class E", "Actual_Class": 495, "Predicted_Class": 495, "Accuracy": 100 }]; var donutData = new Array, actualValues = new Array, predValues = new Array; data.forEach(function(d) { actualValues.push(d.Actual_Class); predValues.push(d.Predicted_Class); }); console.log(data); donutData.push(actualValues); donutData.push(predValues); console.log(donutData); var gs = chart1.selectAll("g").data(donutData).enter().append("g"); var groups = gs.selectAll('.arc') .data(function(d) { return pie(d); }) .enter().append("g").classed("arc", true); path = groups.append('path') .attr('d', function(d, i, j) { return arc.innerRadius(30 + donutWidth * j).outerRadius(donutWidth * (j + 1))(d); }) .attr('fill', function(d, i) { return color(i); }) .on("mouseover", function(d) { d3.select(this).select("path").transition() .duration(200) .attr("d", arcOver); }) .on("mouseout", function(d) { d3.select(this).select("path").transition() .duration(100) .attr("d", arc); }); groups.append("text") .attr("transform", function(d, i, j) { var arc1 = arc.innerRadius(30 + donutWidth * j).outerRadius(donutWidth * (j + 1)); return "translate(" + arc1.centroid(d) + ")"; }) .attr("dy", ".35em") .attr("text-anchor", "middle") .text(function(d, i) { return d.data }); var legend = chart1.selectAll(".legend") .data(color.domain().slice()) //.reverse()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", 190) .attr("y", -(margin.top) * 7 - 8) .attr("width", 18) .attr("height", 18) .style("fill", color); legend.append("text") .attr("x", margin.right * 7) .attr("y", -(margin.top) * 7) .attr("dy", ".35em") .text(function(d, i) { return data[i].Class; }); // }); })(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="chartArea1"></div>