时间戳

首页 > 解决方案 > 在带有鼠标悬停事件的条形图上转换时出现“TypeError: d is undefined”

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

问题描述

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

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

这是我目前拥有的：（工作转换但鼠标悬停不工作，导致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

在调用 then 函数时，所有情况下的错误都TypeError: d is undefined发生在第一个代码片段removeToolTip(d)中，而在执行第二个代码片段的场景中，错误发生.attr("y",(d)=>yBarScale(d.plwdh))在行上。

标签： javascriptd3.jsmouseeventtransition

解决方案

这是你的plwdhBar变量：

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

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

然后你做：

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

推荐阅读