D3.js:饼图,仅向外部区域添加边框 [英] D3.js: Pie graph, adding a border only to the outter region
问题描述
我在D3中得到了一个饼图,并通过笔触将每个切片分开.但是,我只想在切片的外部区域添加边框,而不是在连续线上添加边框,而是要尊重原始切片中的笔划所产生的间隙.请参阅我的图片进行澄清.关于如何做到这一点的任何想法?
I got a pie graph in D3 with a stroke to separete every slice. However, I'd like to add a border only to the outter region of the slices, not in a continuos line but rather respecting the gaps created by the strokes in the original slices. See my image for clarifiation. Any thoughts on how to do that?
请参见 http://jsfiddle.net/4xk58/
arcs.append("path")
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", arc).style('stroke', 'white')
.style('stroke-width', 5);
推荐答案
我通过添加两个额外的足弓集(最多三个)解决了这个问题. 第一个是普通的派,没有笔触
I solved this by adding two extra arch sets, making up to three. The first one is the normal pie, WITHOUT strokes
arcs.append("path")
.attr("fill", function (d, i) {
return color(i);
}).attr("d", arc);
第二个将是我想首先添加的边框.只是我们原始拱门周围的一组拱门,但颜色不同.还不是中风.
The second one will be the border I wanted to add in first place. It's just a set of arches surrounding our original one but in a different color. Not strokes yet.
最后,第三个原型是实际绘制我想要的笔触的原型.
And finally, the third archset will be the one that actually draws the strokes I wanted
//Draw phantom arc paths
phantomArcs.append("path")
.attr("fill", 'white')
.attr("fill-opacity", 0.1)
.attr("d", arcPhantom).style('stroke', 'white')
.style('stroke-width', 5);
这可以弥补效果,请参见 http://jsfiddle.net/odiseo/4xk58/4/
This makes up for the effect, see http://jsfiddle.net/odiseo/4xk58/4/
这篇关于D3.js:饼图,仅向外部区域添加边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!