javascript - 如果我遵循正常的 D3 方式，我是否将 eventListener 添加到每个 SVG 元素？

Question

在d3中处理onclick的正常方式是

selection.append(element)
    .on("click", someFunction)

如果我在 1000 个 svg 元素上这样做，是否意味着我只是附加了 1000 个不同的监听器。如果是这种情况，是否有专门针对 d3 的事件委托(delegate)？

Answer 1

@AlexW answer是(部分)正确的:D3 中没有事件委托(delegate)，只有事件绑定(bind)。

但是，我说部分是因为最好说“D3 中没有用于事件委托(delegate)的本地方法”，因为实际上它很容易实现:使用 D3 进行事件委托(delegate)的丑陋替代方法在于使用 d3.event.target .

例如，在这个非常简单的演示中，我们绑定(bind)了这个数据...

var data = ["foo", "bar", "baz"];

...到 <g> 内的圆圈元素。然后，我们给组绑定(bind)一个事件监听器，并在点击时获取每个圆圈的数据:

g.on("click", function() {
  console.log(d3.select(d3.event.target).datum())
})

这是它:

var svg = d3.select("svg");
var g = svg.append("g");
var data = ["foo", "bar", "baz"];
var circles = g.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cy", 40)
  .attr("cx", function(_, i) {
    return 50 + 100 * i
  })
  .attr("r", 20)
  .attr("fill", "teal");

g.on("click", function() {
  console.log(d3.select(d3.event.target).datum())
})

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

这种方法的优点在于，就像 jQuery 事件委托(delegate)一样，它适用于在定义监听器 之后创建的元素。下面的demo中，红圈处:

var svg = d3.select("svg");
var g = svg.append("g");
var data = ["foo", "bar", "baz"];
var circles = g.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cy", 40)
  .attr("cx", function(_, i) {
    return 50 + 75 * i
  })
  .attr("r", 20)
  .attr("fill", "teal");

g.on("click", function() {
  console.log(d3.select(d3.event.target).datum())
});

g.append("circle")
  .attr("cy", 40)
  .attr("cx", 275)
  .attr("r", 20)
  .attr("fill", "firebrick")
  .datum("foobar")

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

因此，尽管 D3 没有用于事件委托(delegate)的 native 显式方法，但解决方案非常简单明了。