如何用d3做笔画不透明度：0

Question

这是我的代码。我的目标-在饼图中的切片之间进行间隔。

chart.svg.selectAll('path')
       .style('stroke-opacity','0.0')
       .style('stroke-width','10');

我认为，如果网页上的饼图切片的笔画不透明度为0，则类似于切片之间的间隔。问题：如果笔触不透明度等于零，则不起作用。如果等于0.1到1.0之间的数字-则可以正常工作。但是我还有背景的另一种颜色。请帮助初学者！感谢您的关注，祝您有愉快的一天。

Answer 1

我认为问题出在以下误解：当您将其设置stroke-opacity为0时，笔触将是透明的并显示背景色，并且元素的填充将在笔触的内部极限处结束。但是，实际上，如果将设置stroke-opacity为0，则将显示元素的填充（以及背景颜色，一旦笔触以默认的笔触对齐方式向内和向外移动）。

例如，看一下我刚刚制作的这个小提琴：https : //jsfiddle.net/54j25epp/

两对矩形绝对相等：

rects.attr("x", function(d){ return d*10})
 .attr("y", 0)
 .attr("width", 100)
 .attr("height", 80)
 .attr("fill", function(d){ return color(d)})
 .attr("stroke-width", 10)
 .attr("stroke", "white")

唯一的区别是，在上面的对中，我添加：

.attr("stroke-opacity", 0);

就像没有中风一样。

可以看到，与笔划对齐无关，元素的面积和大小是相同的。检查默认笔划：

用黑线勾勒出的rect元素保持不变。

最后，我只是发现了这个小提琴（我不知道谁是作​​者），然后将笔划设置为白色，将笔划宽度设置为10：这就是您想要的，模仿了一个真实的填充。但是，将笔触不透明度设置为0时，您不会得到此结果：https : //jsfiddle.net/j1769sx2/