如何在 svg 中为 d3 画笔创建路径答案

【问题标题】：How to Create a path in svg for d3 brush如何在 svg 中为 d3 画笔创建路径
【发布时间】：2020-08-26 01:56:46
【问题描述】：

这里有一个像下面这样的 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”类似路径

那么我怎样才能实现上面的画笔句柄呢

目前我的刷子是这样的

【问题讨论】：

标签： javascript angular d3.js svg

【解决方案1】：

我在这里发现您的代码存在一些问题。

箭头函数不分配this，所以箭头函数中的this实际上是窗口，我不确定这是不是有意的。如果你想让this成为路径，你需要使用功能块而不是箭头函数。

窗口和路径都没有height 属性，我认为您需要innerHeight。如果您查看在路径上设置的d 属性，您会发现有一些NaNs 您正在尝试使用y。

brushResizePath 在定义之前被使用，将定义移到const focusHandle 位上方。

这是我的 CodePen 工作：https://codepen.io/Thource/pen/RwWqmZj

【讨论】：