javascript - 如何做描边不透明度 :0 with d3

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，您将显示元素的填充(以及背景色，一旦笔划在默认的 stroke-alignment 中向内和向外移动).

例如，看这个例子:

var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 300);

var color = d3.scale.category10();

data = [10, 20];

var rects = svg.selectAll(".rect")
.data(data)
.enter()
.append("rect");

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);

var rects2 = svg.selectAll(".rect2")
.data(data)
.enter()
.append("rect");

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

两对矩形绝对相等:

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);

这与没有中风是一样的。

您可以看到，与笔画对齐方式无关，元素的面积和大小是相同的。检查默认笔画:

由黑线勾勒出轮廓的矩形元素保持不变。

最后，我刚刚找到了这个 fiddle (我不知道作者是谁)，我将 stroke 设置为白色，stroke-width 设置为 10:这就是你想要的，模仿真实的填充。但是将描边不透明度设置为 0 不会得到此结果:https://jsfiddle.net/j1769sx2/