我想用 d3.js 创建一个图表,看起来像这样的弧线:http://jsfiddle.net/g0r9n090/111/
图表应包含多个图层,如下所示:http://jsfiddle.net/rq7s1e6j/
如何创建一个图表,它具有“间隙”,如弧线,但具有多个图层,如最后一个 fiddle ?
最后一个图表的代码:
var dataset = {
apples: [53245, 28479, 19697, 24037, 40245],
oranges: [53245, 28479, 19697, 24037, 40245],
lemons: [53245, 28479, 19697, 24037, 40245],
pears: [53245, 28479, 19697, 24037, 40245],
};
var width = 600,
height = 400,
cwidth = 45;
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("stroke-width", "2")
.attr("stroke", "#fff")
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
gs.selectAll("path").data(function (d) { return pie(d); })
.enter().append("path")
.attr("fill", function (d, i) { return color(i); })
.attr("d", function (d, i, j) {
return arc.innerRadius(cwidth * j).outerRadius(cwidth * (j + 1))(d);
});
任何可以让我更接近我的目标的帮助,我们深表感谢! :)
最佳答案
饼图布局还允许您设置开始和结束 Angular ,以便您可以执行以下操作在饼图中创建间隙:
var pie = d3.layout.pie()
.sort(null)
.startAngle(-40 * (Math.PI/180))
.endAngle(270 * (Math.PI/180));
看起来像这样:http://jsfiddle.net/y1no35mw/1/
您只能在圆弧生成器上设置 innerRadius
属性,因此要添加空心中心,您可以做的就是向所有单独的圆弧添加 inner_radius
偏移量,例如所以:
var inner_radius = 20;
gs.selectAll("path").data(function (d) { return pie(d); })
.enter().append("path")
.attr("fill", function (d, i) { return color(i); })
.attr("d", function (d, i, j) {
return arc
.innerRadius(cwidth * j + inner_radius)
.outerRadius(cwidth * (j + 1) + inner_radius)(d);
});
它再次发挥作用:http://jsfiddle.net/y1no35mw/2/
此外,如果您希望内半径具有cwidth
,您只需乘以(j+1)
和(j+2)
> 然后您就不需要添加 inner_radius
了。
关于javascript - 在D3中绘制分层圆弧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28092275/