javascript - js中的鼠标悬停引发未定义的错误

Question

在下面的代码片段中，当我尝试为 svg 添加 mouseover 功能时，它会抛出 Uncaught TypeError: undefined is not a function on mouseover。

svg.selectAll(".bar1")
    .data(clensedData)
    .transition()
    .delay(function (d, i) {
      return i / clensedData.length * 10;
    })
    .duration(500)
    .attr("class", "bar1")
    .attr("x", function (d) {
      return x(d.City)
    })
    .attr("width", x.rangeBand())
    .attr("y", function (d) {
      return y(d.Cases);
    })
    .attr("height", function (d) {
      return height - y(d.Cases);
    })
    .attr("fill", function (d, i) {

      if (d.diff == max_of_array)
        return "green";

      if (d.diff == min_arr)
        return "red";
      else
        return "orange";
    })              
    .on("mouseover", function () {
});

有什么想法吗？ ps:刚接触js

Answer 1

要解释为什么移动点击处理程序解决了您的问题，是因为您没有在 D3 选择上调用 .on('click', function(){}) ，而是在 D3 上调用.transition() 返回的 transition 。

我猜您在 transition() 调用之前移动了它。在大多数情况下，通常的模式是将 transition()、duration() 及其 attr() 作为功能链。