[英]D3.js placing text over arcs in a donut chart
I am trying to place text over a donut chart with inner rings created with D3. 我正在尝试将文本放在圆环图上,内圈用D3创建。 The plunker code can be accessed here: plunker 可以在这里访问plunker代码: plunker
For placing the text over the arcs, I want to access the donutData array and place the values over each ring of the chart. 为了将文本放在弧上,我想访问donutData数组并将值放在图表的每个环上。
gs.append("text")
.attr("transform", function(d){
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d,i){
return donutData[i];
});
Since the donutData array stores the values of "actual" and "predicted" which it uses for creating the donut chart, I want those values to be placed over each of the arcs in the chart. 由于donutData数组存储了用于创建圆环图的“实际”和“预测”的值,我希望将这些值放在图表中的每个弧上。
To add label to the center of the arc you need to add the label to the centroid. 要将标签添加到圆弧的中心,您需要将标签添加到质心。
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;
});
Hope this helps! 希望这可以帮助!
You will have to group the arc paths and labels. 您必须对弧路径和标签进行分组。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.