d3 无法读取未定义的属性“分类”答案

【问题标题】：d3 Cannot read property 'classed' of undefinedd3 无法读取未定义的属性“分类”
【发布时间】：2019-04-16 15:48:19
【问题描述】：

试图通过抓取当前路径的 pathID 并为其分配一个 class .highlight 来突出显示当前路径行，这使得 stroke-width: 2px。

console.log 显示 current pathID 但它不想分配类。请帮忙。我在这里做错了什么？

//Generate group (main)
    let groups = svg.selectAll("g")
        .data(dataset)
        .enter()
        .append("g")
        .on("mouseover", function(d) {
            d3.select(this)
                .call(revealCityName)
        })
        .on("mouseout", hideCityName)

//Path (path #, path line)
groups
    .append("path").classed("line", true)
    .attr("id", function(d) {
        console.log(d.country)
        if (d && d.length != 0) {
            return d.country.replace(/ |,|\./g, '_');
        }
    })
    .attr("d", d => line(d.emissions))
    .classed("unfocused", true)
    .style("stroke-width", d =>
        d.country === "China" ? 1 : 0.2
    )
    .on("mouseover", highlightPath);

//Text (contries on the left y axis)
groups
    .append("text")
    .datum(function(d) {
        return { country: d.country, value: d.emissions[d.emissions.length - 1]};
    })
    .attr("transform", function(d) {
        if (d.value) {
            return "translate(" + xScale(d.value.year) + "," + yScale(d.value.amount) + ")";
        } else {
            return null;
        }
    })
    .attr("x", 3)
    .attr("dy", 4)
    .style("font-size", 10)
    .style("font-family", "Abril Fatface")
    .text(d => d.country)
    .classed("hidden", function(d) {
        if (d.value && d.value.amount > 700000) {
            return false
        } else {
            return true;
        }
    })

还有一个我正在尝试分配类的函数：

    function highlightPath(d) {

    let pathID = d3.select(this).attr("id");

    console.log(pathID);

    let currentId = d3.select(this).select("path#" + pathID)
    console.log("Current ID: ",currentId)
    .classed("highlight", true);
}

【问题讨论】：

标签： javascript arrays object d3.js

【解决方案1】：

console.log 正在拆分代码。这是错误：

function highlightPath(d) {

    let pathID = d3.select(this).attr("id");

    console.log(pathID);

    let currentId = d3.select(this).select("path#" + pathID)
    console.log("Current ID: ",currentId) /* <<<<<<<<< HERE (line 218 in your codepen) */ 
    .classed("highlight", true);
}

应该是：

function highlightPath(d) {

    let pathID = d3.select(this).attr("id");

    console.log(pathID);

    let currentId = d3.select(this).classed('highlight', true) // thanks to @shashank

    console.log("Current ID: ", currentId)
}

更新的演示：https://codepen.io/anon/pen/qQRJXp

@Shashank 评论后更新

highlightPath 是一个绑定到路径的mouseover 事件，导致 d3.select(this) 成为路径本身，因此您不需要任何 .select(path#pathID) 在这种情况下，但只是 d3.select(this).classed('highlighted', true)

【讨论】：

不错，但更新后的 codepen 仍然无法正确应用高亮类。
这个问题的标题是 d3 Cannot read property 'classed' of undefined - 我回答了这个问题。请避免在一篇文章中提出多个问题。
@EdgarKiljak 这是您问题的正确答案。如果您注释掉console.log() 或按照@qiAlex 的回答建议移动该行，则codepen 工作正常。
抱歉打断，但我发现它不起作用，原因如下：highlightPath 是绑定到path 的鼠标悬停事件，导致d3.select(this) 成为path 本身因此在这种情况下您不需要任何.select(path#pathID)，而只需d3.select(this).classed('highlighted', true) 就可以了。
@EdgarKiljak 同样，这是一个不同的问题。这是关于 CSS 选择器的specificity。在您的情况下，highlight 类实际上设置在路径上。不过，您不会看到任何变化，因为它被更具体的 path.line 选择器和元素本身的 style 属性所取代。

【解决方案2】：

试试这个：

 function highlightPath(d) {

    let pathID = d3.select(this).attr("id");

    console.log(pathID);

    d3.select("path#" + pathID)
    .attr("class", "highlight");
}

【讨论】：