javascript - "TypeError: d is undefined"在带有鼠标悬停事件的条形图上转换时

Question

我正在努力将过渡添加到我的条形图中，它们从轴开始并上升到所需的高度。我让过渡工作，但鼠标悬停事件不再有效。如果我已经将数据附加到 plwdhBar 对象并稍后在代码中调用它，我很困惑为什么 d 是未定义的。

看了类似的解决方案后，似乎解决方案是调用条形图条一次，从数据中设置它们，然后添加过渡，然后添加鼠标悬停事件。

这是我目前拥有的:(工作转换但不工作鼠标悬停，导致 showTooltip(d) 函数错误)

var plwdhBar = svg.append("g")
d3.csv("Data/"+name+".csv").then(function(dataset) {
    plwdhBar.selectAll("plwdhBar") //bar2
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","plwdhBar")
        .attr("width", 30)
        .attr("fill", bar2Color)
        .attr("x",(d)=>xScale(d.year)+(barW/2)-15)
        .attr("y", h-margin.bottom)
        .transition()
        .duration(200)
        .attr("y",(d)=>yBarScale(d.plwdh))
        .attr("height", (d)=>(h-yBarScale(d.plwdh)) -margin.bottom)
    plwdhBar.on("mouseover",function(d){
        showTooltip(d);
    }).on("mouseout",function(){
        removeTooltip();
    });
}

我也试过取出转换的代码行并制作它:

plwdhBar.transition()
    .duration(200)
    .attr("y",(d)=>yBarScale(d.plwdh))
    .attr("height", (d)=>(h-yBarScale(d.plwdh)) -margin.bottom)

然而，这也导致了 d

的未定义错误

所有情况下的错误都是 TypeError: d is undefined 并且发生在第一个代码片段中，然后 removeToolTip(d) 函数被调用，并且发生在以下场景中第二个代码片段已实现错误发生在 .attr("y",(d)=>yBarScale(d.plwdh)) 行。

Answer 1

这是您的 plwdhBar 变量:

var plwdhBar = svg.append("g");

仅此而已，仅此而已。没有数据绑定(bind)到它。请记住这一点，因为此信息对于理解这里的问题很重要。

然后你做:

plwdhBar.selectAll("plwdhBar")
    .data(dataset)
    .enter()
    .append("rect")
    //etc...

当然，这是附加您的矩形，如果您在该链中添加监听器，它将起作用。但请注意，这不会改变plwdhBar 是什么，它一直只是var plwdhBar = svg.append("g");，正如我们最初展示的那样。

因此，当你以后做...

plwdhBar.on("mouseover",function(d){
    showTooltip(d);
})

...您会收到错误消息，因为这里当然没有数据。

解决方案:命名您的选择!

例如:

var foo = plwdhBar.selectAll("plwdhBar")
    .data(dataset)
    .enter()
    .append("rect")
    //etc...

现在您可以:

foo.on("mouseover",function(d){
    showTooltip(d);
})

但是，有一个重要的建议:转换也有一个名为on 的方法。所以，从主链中移除转换，否则你会得到另一个错误(与这个错误无关)。您可以单独添加过渡:

foo.transition()
    //etc...