作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有三个圆环图
变量数据 = [
{
机构:【53245、28479、19697、24037、40245】
},
{
机构:[45, 9, 127, 37, 11]
},
{
机构:[3245、88479、45697、1037、77245]
}
]
var width = 100,
height = 100,
radius = Math.min(width, height) / 2;
var color = d3.scale.category20();
for (index = 0; index < data.length; ++index) {
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 30)
.outerRadius(radius - 5);
var svg = d3.select("body").append("svg:svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path = svg.selectAll("path")
.data(pie(data[index].institution))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
}
最佳答案
Here 我的解决方案:
var data = [
{
institution: [53245, 28479, 19697, 24037, 40245]
},
{
institution: [45, 9, 127, 37, 11]
},
{
institution: [3245, 88479, 45697, 1037, 77245]
}
];
var width = 200;
var height = 200;
var radius = Math.min(width, height) / 4;
var r = radius;
var textOffset=5;
var colours = ['#ffc400','#e53517','#7ab51d','#009fda','#c2c2c2'];
for (index = 0; index < data.length; ++index) {
var pie = d3.layout.pie().sort(null);
var arc = d3.svg.arc().innerRadius(radius - 30).outerRadius(radius - 5);
var svg = d3.select("body").append("svg:svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var piedata=pie(data[index].institution);
var ticks = svg.selectAll("line").data(piedata).enter().append("line");
ticks.attr("x1", 0)
.attr("x2", 0)
.attr("y1", -radius+4)
.attr("y2", -radius-2)
.attr("stroke", "gray")
.attr("transform", function(d) {
return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")";
});
var labels = svg.selectAll("text").data(piedata).enter().append("text");
labels.attr("class", "value")
.attr("transform", function(d) {
var dist=radius+15;
var winkel=(d.startAngle+d.endAngle)/2;
var x=dist*Math.sin(winkel);
var y=-dist*Math.cos(winkel);
return "translate(" + x + "," + y + ")";
})
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d){
return d.value;
});
var path = svg.selectAll("path")
.data(piedata)
.enter().append("path")
.attr("fill", function(d, i) { return colours[i]; })
.attr("d", arc);
}
关于d3.js - 带刻度线的圆环图 (d3),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16441401/
我是一名优秀的程序员,十分优秀!