将交互从 D3 v3 更改为 v4答案

【问题标题】：Changing interactions from D3 v3 to v4将交互从 D3 v3 更改为 v4
【发布时间】：2019-06-09 18:49:21
【问题描述】：

我花了更多的 5 个小时将这个 pie chart 更改为 D3 v4，但它仍然不能正常工作（即交互没有运行）。

这里是设置它们的位置：

paths.enter()
    .append('svg:path')
    .attr('d', arc)
    .style('fill', function(d, i) {
        return color(i);
    })
    .style('stroke', '#FFFFFF')
    .on(eventObj)

【问题讨论】：

标签： javascript d3.js events data-visualization

【解决方案1】：

如您所见，在 D3 v3 示例中，selection.on...

paths.on(eventObj)

...接收具有所有类型侦听器的 object：

var eventObj = {
    'mouseover': function(d, i, j) {
        //etc...
    },
    'mouseout': function(d, i, j) {
        //etc...
    },
    'click': function(d, i, j) {
        //etc...
    }
};

这就是问题所在：这在 D3 v3 中有效，但在 v4 中无效。

看看这个演示，使用 D3 v3（悬停在圆圈上）：

const events = {
  "mouseover": function() {
    console.log("mouseover")
  },
  "mouseout": function() {
    console.log("mouseout")
  }
};

d3.select("circle").on(events)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<svg>
  <circle cx="100" cy="50" r="25"></circle>
</svg>

现在是完全相同的代码，但使用的是 D3 v4：

const events = {
  "mouseover": function() {
    console.log("mouseover")
  },
  "mouseout": function() {
    console.log("mouseout")
  }
};

d3.select("circle").on(events)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg>
  <circle cx="100" cy="50" r="25"></circle>
</svg>

它不起作用。它不会抛出任何错误，它只是默默地失败。

解决方案：分别设置每个事件监听器：

paths.on("mouseover", etc...)
    .on("mouseout", etc...)
    .on("click", etc...);

【讨论】：