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屋！