Javascript d3.js条形图内联笔划

我试图实现一个堆叠条形图，其中一个条形图数据集具有半透明的颜色和不透明的笔划。但是，笔划应位于杆的内部而不是外部，这是默认行为。我不知道任何可能的属性或样式设置可以实现这一点

我正在定义笔划

.attr("stroke", function(d) { return zStroke(d.key); })
.attr("stroke-width", (function(d) { return zStrokeWidth(d.key) + "px"; }))

---

其中zStroke和zStrokeWidth返回条形图数据系列的颜色和宽度。

只需更改宽度和高度，因为使用SVG，边框位于要应用边框的条形图系列的所有边上，或者没有边框。例如

.attr("width", function(d) { return d.withBorder ? 20 : 24; })
.attr("height", function(d) { return d.height + d.withBorder ? 0 : 4; })

---

不可能：。等待SVG 2.0在2047年发布。在这种情况下，是否可以只缩小系列的宽度，我需要为笔划占用的几个像素提供一个轮廓？看看我共享的答案，它有一些替代方案。我想做一些类似的事情，并尝试了您的示例，但在我的例子中，当我传递函数而不是x.bandwidth（）返回值时，d参数只是两个元素的数组。在你的例子中，d应该是什么？我不知道你输入的是什么数据，所以也许两个元素的数组可以表示位置和高度，或者类似的东西。在这种情况下，在调用这些

attr

方法之前，最好

map

数据，并将每个数组放入一个对象中，该对象还应该具有属性，例如

withBorder

，以便我的示例工作。如果两个元素的数组表示两个堆叠的值，则需要首先拆分数据，或者您可以使用

selection.filter

，但如果不查看代码和数据，很难判断您拥有什么。顺便问一下，如果d是数组，那么d.key是如何工作的？