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

Question

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

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

如果我这样做1000 svg元素,这是否意味着我只附加了1000个不同的听众.如果是这种情况,是否特别针对d3进行了事件委托？

Answer 1

@AlexW答案是(部分)正确的:D3中没有事件委托,只有事件绑定.

但是,我之所以说部分是因为最好说" D3中没有本地方法进行事件委托",因为事实上实现起来非常容易:使用D3进行事件委派的丑陋替代方案就是使用d3. event.target.

例如,在这个非常简单的演示中,我们绑定了这些数据......

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

...到<g>元素内的圆圈.然后,我们将一个事件监听器绑定到该组,并在单击时获取每个圆的基准:

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事件委托一样,它适用于定义侦听器后创建的元素.在以下演示中,红色圆圈:

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没有用于事件委派的本地显式方法,但解决方案非常简单明了.