Javascript 如何在svg中为d3笔刷创建路径

下面是我的svg

const focusHandle = focusBrush.selectAll(".handle--custom")
            .data([{type: "w"}, {type: "e"}])
            .enter().append("path")
              .attr("class", "handle--custom")
              .attr("stroke", "#000")
              .attr("cursor", "ew-resize")
              .attr("d", brushResizePath)


const brushResizePath = (d) => {
            var e = +(d.type == "e"),
                x = e ? 1 : -1,
                y = this.height / 2;
            return "M" + (.5 * x) + "," + y + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6) + "V" + (2 * y - 6) + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y) + "Z" + "M" + (2.5 * x) + "," + (y + 8) + "V" + (2 * y - 8) + "M" + (4.5 * x) + "," + (y + 8) + "V" + (2 * y - 8);
        }

目前svg代码是这样的

 <path class="c" d="M-8046.012,2842.011h-1.6" transform="translate(8047.61 -2837.554)"/>
 </g></g></g></svg>

例如：“M0.5,54A6,6 0 0 1 6.5,60V102A6,6 0 0 1 0.5108ZM2.5,62V100M4.5,62V100”类路径

那么我如何实现上面的画笔句柄呢

---

目前我的画笔是这样的

我发现你的代码有一些问题

箭头函数不指定

此

，因此箭头函数中的

此

实际上是窗口，我不确定这是否是有意的。如果希望

此

成为路径，则需要使用功能块而不是箭头函数

窗口和路径都没有

height

属性，我想您应该改为

innerHeight

。如果您查看在中的路径上设置的

d

属性，您将看到在尝试使用

y

的地方有一些

NaN

s

brushResizePath

在定义之前正在使用，请将定义移到

const focusHandle

位上方

这是我的代码笔，它可以工作：