D3單擊事件返回null屬性

Question

我正在使用D3 V4並試圖獲取單擊的對象的ID。哎呀，我很想看到任何返回的屬性值（d，fill，class等）。相反，無論屬性如何，我都會返回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>