Question

我花了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)

Answer 1

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

paths.on(eventObj)

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

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...);

将交互从D3 v3更改为v4

1 个答案: