участок круговая диаграмма с данными JSON в d3

Question

здесь является файл GeoJSON

 { 
    "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/

Answer 1

Ключевым моментом здесь является понимание того, как извлекать данные из вложенной структуры JSON с помощью d3.

Самый простой способ - использовать консоль вашего браузера (F12 в Chrome) и распечатать данные, к которым вы пытаетесь получить доступ. Где вы пытаетесь установить 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/