如何在SVG中为D3画笔创建路径

debugcn 发表于 Dev

Shyam奈尔

这是我下面的svg

目前的SVG代码是这样的

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

当前这是使用组和路径组合的，这是我想附加为d3画笔柄的方法，但是这里的问题是我目前正在创建如下所示的画笔柄

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

例如：“ M0.5,54A6,6 0 0 1 6.5,60V102A6,6 0 0 1 0.5,108ZM2.5,62V100M4.5,62V100”

所以我该如何实现上面的刷柄

目前我的刷子是这样的

Thource

我在这里发现了一些与您的代码有关的问题。

箭头函数不分配this，因此this箭头函数实际上是窗口，我不确定这是否是预期的。如果要this成为路径，则需要使用功能块而不是箭头功能。

窗口和路径都没有height属性，我想您想要的是innerHeight。如果您查看在d路径中设置的属性，将会看到NaN您尝试使用的属性y。