如何在d3中獲取plot坐標點？

Question

我有一個帶有多個坐標的 JSON 文件，如下所示：

[
{
      "coord": [
          184.5247050,
          775.2556777
      ]
}, 
{
      "coord": [
          177.4747474,
          833.2566478
      ]
},
{
      "coord": [
          255.6434553,
          446.7733333
      ]
}
] 

我將此代碼與d3庫一起使用，以嘗試 plot canvas 上的數據：

var svg = d3.select("#canvas");

d3.json(location_data, function(data){

svg.selectAll("circle")
                .data(data.coord)
                .enter()
                .append("circle")
                .attr("cx", function(element, index){
                return index;
                })
                .attr("cy", function(element, index){
                return index;
                })
                .attr("r", 30)
                .attr("fill", "lightgreen");
})

但是我沒有看到任何 output。代碼有什么問題？ 我如何解決它？

Answer 1

問題是您使用.data(data.coord)綁定數據，但數據是一個數組並且沒有坐標屬性。 您必須將 object 數組轉換為包含 arrays 坐標的數組，如下所示：

.data(data.map(d => d.coord))

您可能還需要更改設置“cx”和“cy”屬性的方式：

.attr("cx", d => d[0])
.attr("cy", d => d[1])