javascript - D3点击事件返回空属性

Question

我正在使用 D3 V4 并试图获取被点击对象的 ID。哎呀，我很想看到返回的任何属性值(d、填充、类等)。相反，无论属性如何，我都会返回 null。代码如下。

    d3.json("0267_02_combine.json", function(json) {
    var features = json.features;

    var path = d3.geoPath()
        .projection(projection.fitExtent([[0, 0], [w, h]], json));

    svg.selectAll(".room")
        .data(json)
    .enter().append("path")
        .attr("class", "room")
        .attr("d", path)
        .attr("fill","lightblue")
        .attr("id", function(d){                
            return d.properties.loc;
        });

    svg.on("click", function() {
        console.log(d3.select(this)); //I see stuff!  Yay!
        console.log(d3.select(this).attr("fill")); //returns null
        console.log(d3.select(this).attr("id")); //returns null
        console.log(d3.select(this).attr("class")); //returns null

        var coords = d3.mouse(this);
        console.log(coords); //returns SVG coordinates
        console.log(projection.invert(d3.mouse(this))); //returns lat/lon

    })

});

Answer 1

您确定要附加点击处理程序的选定元素具有填充、类或 ID 吗？

尝试将您的点击处理程序添加到路径中。

d3.json("0267_02_combine.json", function(json) {
    var features = json.features;

    var path = d3.geoPath()
        .projection(projection.fitExtent([[0, 0], [w, h]], json));

    var path = svg.selectAll(".room")
        .data(json)
    .enter().append("path")
        .attr("class", "room")
        .attr("d", path)
        .attr("fill","lightblue")
        .attr("id", function(d){                
            return d.properties.loc;
        });

    path.on("click", function() {
        console.log(d3.select(this)); //I see stuff!  Yay!
        console.log(d3.select(this).attr("fill")); //returns null
        console.log(d3.select(this).attr("id")); //returns null
        console.log(d3.select(this).attr("class")); //returns null

        var coords = d3.mouse(this);
        console.log(coords); //returns SVG coordinates
        console.log(projection.invert(d3.mouse(this))); //returns lat/lon

    })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>