如何修改此D3.js以接受不同的JSON結構？

Question

我想使用此D3.js：https://gist.github.com/vgrocha/1580af34e56ee6224d33

目前它只適用於類似於「flare-labeled.json」（在回購中發現）的結構。

但我想使用這樣的結構：

[ 
    { 
    "ID": "10414713", 
    "Case Number": "HZ152928", 
    "Date": "02/16/2016 11:02:00 PM", 
    "Block": "130XX S ELLIS AVE", 
    "IUCR": "041A", 
    "Primary Type": "BATTERY", 
    "Description": "AGGRAVATED: HANDGUN", 
    "Location Description": "CHA PARKING LOT/GROUNDS", 
    "Arrest": "false", 
    "Domestic": "false", 
    "Beat": "0533", 
    "District": "005", 
    "Ward": "9", 
    "Community Area": "54", 
    "FBI Code": "04B", 
    "X Coordinate": "", 
    "Y Coordinate": "", 
    "Year": "2016", 
    "Updated On": "02/19/2016 03:45:53 PM", 
    "Latitude": "", 
    "Longitude": "", 
    "Location": "" 
    }, 
    { 
    "ID": "10414628", 
    "Case Number": "HZ152506", 
    "Date": "02/13/2016 11:45:00 PM", 
    "Block": "017XX W DIVISION ST", 
    "IUCR": "0890", 
    "Primary Type": "THEFT", 
    "Description": "FROM BUILDING", 
    "Location Description": "TAVERN/LIQUOR STORE", 
    "Arrest": "false", 
    "Domestic": "false", 
    "Beat": "1213", 
    "District": "012", 
    "Ward": "1", 
    "Community Area": "24", 
    "FBI Code": "06", 
    "X Coordinate": "1164361", 
    "Y Coordinate": "1908039", 
    "Year": "2016", 
    "Updated On": "02/20/2016 03:53:39 PM", 
    "Latitude": "41.903278103", 
    "Longitude": "-87.671706965", 
    "Location": "(41.903278103, -87.671706965)" 
    } 
] 

我想在內環外環和外「位置說明」上的「主要類型」和「說明」 -外環。

這可能嗎？

Answer 1

我不會碰d3插件。相反，我會轉換數據看起來相似。

假設你在一個名爲data變量提供謊言中的數據，你可以寫：

var input = { 
    "name": "flare", 
    "description": "flare", 
    "children": [] 
} 

for (var i = 0; i < data.length; i++) { 
    var incident = data[i]; 
    var primary = incident["Primary Type"]; 
    var description = incident["Description"]; 
    var locDesc = incident["Location Description"]; 
    var primaryIndex = -1; 
    for (var j = 0; j < input.children.length; j++) { 
    if (input.children[j].name == primary) { 
     primaryIndex = j; 
     break; 
    } 
    } 
    if (primaryIndex == -1) { 
    input.children.push({ 
     "name": primary, 
     "description": primary, 
     "children": [] 
    }) 
    primaryIndex = input.children.length - 1; 
    } 
    var node = input.children[primaryIndex]; 
    var descriptionIndex = -1; 
    for (var j = 0; j < node.children.length; j++) { 
    if (node.children[j].name == description) { 
     descriptionIndex = j; 
     break; 
    } 
    } 
    if (descriptionIndex == -1) { 
    node.children.push({ 
     "name": description, 
     "description": description, 
     "children": [] 
    }) 
    descriptionIndex = node.children.length - 1; 
    } 
    var node = node.children[descriptionIndex]; 
    var locDescIndex = -1; 
    for (var j = 0; j < node.children.length; j++) { 
    if (node.children[j].name == locDesc) { 
     locDescIndex = j; 
     break; 
    } 
    } 
    if (locDescIndex == -1) { 
    node.children.push({ 
     "name": locDesc, 
     "description": locDesc, 
     "size": 0 
    }) 
    locDescIndex = node.children.length - 1; 
    } 
    node.children[locDescIndex].size++; 
} 

現在，您需要爲D3輸入在於input。