[英]Adding custom brush handles in D3 V4?
I'm trying to add some custom elements to the handles of a brush in a D3 project I'm working on — the desired final result is here — and I've been stymied by D3 V4's move from <g>
elements for brush handles to <rect>
elements. 我正在尝试在我正在研究的D3项目中为画笔的手柄添加一些自定义元素 - 期望的最终结果在这里 - 我被D3 V4从画笔手柄的
<g>
元素移动所困扰到<rect>
元素。 The V4 docs say that you can add, remove, or modify the brush handles using the .handle--*
class, but I haven't been able to get that to work. V4文档说您可以使用
.handle--*
类添加,删除或修改画笔句柄,但我无法使其工作。 For example, when I invoke: 例如,当我调用时:
const brushContainer = d3.select('#brushContainer');
brushContainer.call(d3.brushX());
brushContainer.selectAll('.handle').remove();
brushContainer.append('rect')
.attr('class', 'handle handle--w');
I get the following error: 我收到以下错误:
TypeError: undefined is not an object (evaluating 'd.type')
Note that I wouldn't necessarily expect the above code to work, but I haven't been able to find any working examples, or any clues in the docs or the source. 请注意,我不一定希望上面的代码能够正常工作,但我无法在文档或源代码中找到任何有用的示例或任何线索。
Edit: I just had the idea of appending the required <g>
s independently, then changing their x
attributes to d3.event.selection
on brush
. 编辑:我只是想要独立地附加所需的
<g>
,然后在brush
d3.event.selection
它们的x
属性更改为d3.event.selection
。 I'd like to be able to use the <g>
s as handles, and this approach leaves them without click handlers, but if this is the Canonical Right Answer, I'll just go ahead and do that. 我希望能够使用
<g>
作为句柄,这种方法使它们没有点击处理程序,但如果这是Canonical Right Answer,我会继续这样做。
Yes, you are supposed to add and position the handles independently with the brush event. 是的,您应该使用画笔事件独立添加和定位手柄。
https://github.com/d3/d3-brush/issues/14 https://github.com/d3/d3-brush/issues/14
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.