javascript - 如何 .move() 选定的画笔？

Question

TL;DR: 你怎么移动 d3.select('#a_brush') ？

问题

我里面有刷子<g>名为 axes 的团体.每个<g> axis 包含一个 d3 轴和一个 d3 画笔。在 axes 上的更新选择中, 我想更新 d3 轴和画笔。

axes.each(function (d) { d3.select(this).select('.axis').call(d3.axisBottom(d[1])) });
axes.each(function (d) { d3.select(this).select('.brush').call(brush.move, f(d)) });

在上面，axes是一个更新选择。假设 f(d)产生一个合适的数组。这两行中的第一行有效，但第二行抛出:

Uncaught TypeError: Cannot read property 'move' of undefined

这可能是因为我没有在名为 brush 的地方保存任何变量。我希望调用.move方法直接在选择上，而无需保存画笔变量。

在选择中移动画笔的适当命名是什么

axes.each(function (d) { d3.select(this).select('.brush') ?? ... somehow move the brush to f(d) ...

注意事项

• > d3 brush.move() docs
• > "Click-to-Recenter Brush" Block和 Brush & Zoom有一个.call(brush.move与保存 brush多变的。
• > Brush Snapping III和 Brush Snapping II 有d3.select(this).call(d3.event.target.move,但我可能不会从任何最近的 d3 事件中移动画笔。

Answer 1

你绝对应该为你的画笔定义一个变量(或常量)，比如:

const brush = d3.brush();

这样，您就不需要每次都自定义范围和其他参数。但是，如果出于某种原因您真的不想这样做，只需将 brush 更改为 d3.brush():

d3.select(this).select('.brush').call(d3.brush().move, f(d))

这是一个基本的演示，点击按钮移动画笔:

const svg = d3.select("svg");

const g = svg.append("g");

g.call(d3.brush());

d3.select("button").on("click", function() {
  g.call(d3.brush().move, [
    [100, 0],
    [400, 100]
  ])
})

svg {
  background-color: wheat;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<button>Click</button>
<br>
<svg width="500" height="100"></svg>