D3.js:饼图,仅向外部区域添加边框

2024-03-25

我在 D3 中得到了一个饼图,并用笔画分隔了每个切片。但是,我想仅向切片的外部区域添加边框,而不是在连续线上添加边框,而是尊重原始切片中的笔划创建的间隙。请参阅我的图片以进行澄清。关于如何做到这一点有什么想法吗?

See http://jsfiddle.net/4xk58/ 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);

我通过添加两个额外的拱形组来解决这个问题,总共三个。 第一个是普通的馅饼,没有笔画

arcs.append("path")
.attr("fill", function (d, i) {
   return color(i);
}).attr("d", arc);

第二个是我想首先添加的边框。它只是围绕我们原来的拱门的一组拱门,但颜色不同。还没有中风。

最后,第三个架构将是真正绘制我想要的笔画的架构

//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/ http://jsfiddle.net/odiseo/4xk58/4/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

D3.js:饼图,仅向外部区域添加边框 的相关文章