情節從JSON數據D3

這裏餅圖是GeoJSON的文件情節從JSON數據D3

 { 
    "type": "FeatureCollection", 
    "features": [{ 
     "type": "Feature", 
     "properties": { 
      "profit": 326, 
      "npa": 174.000000 
     } 
    }, { 
     "type": "Feature", 
     "properties": { 
      "profit": 1762, 
      "npa": 1683.000000 
     } 
    }] 
}

我想從GeoJSON的代碼繪製的餅圖。我想要基於價值「利潤」的餅圖。在此先感謝，我試圖點擊這裏查看小提琴

小提琴鏈接 - https://jsfiddle.net/venkatkiranpolamuri/92hn5bfb/

來源

2015-12-29 Venkat Kiran

這裏的關鍵是要了解如何從一個嵌套的JSON結構使用D3檢索數據。

最簡單的方法是使用瀏覽器的控制檯（Chrome中的F12）並打印出您嘗試訪問的數據。當您試圖設置value的餡餅佈局你有

return d.profit

然而，通過添加console.log(d.profit)行，你可以看到，這是一個未定義的值。

事實上profit嵌套在properties水平，你需要踏進這個級別第一：

.value(function (d) { 
    console.log(d) 
    // Changed the next line from d.profit 
    return d.properties.profit; 
}

同樣得到value當設置圓弧的顏色和文本價值，你應該使用：

d.value

而不是

d.data.profit

從pie(data)結構返回所需的值。

這裏的工作小提琴：https://jsfiddle.net/henbox/ed3tukwx/1/

來源

2015-12-29 13:49:10

非常感謝先生....這就是我究竟需要。 –

先生，如何給一個本地geojson文件作爲輸入並得到相同的結果？ –

將您的代碼基於http://bl.ocks.org/mbostock/3887235，但使用'd3.json'代替'd3.csv'。請參閱http://learnjsdata.com/read_data.html上的「閱讀JSON文件」一節以獲取更好的解釋。 –

情節從JSON數據D3

回答

相關問題