d3圖表sankey json錯誤

我迷失了圖形創建中的錯誤，任何人都可以幫助我嗎？我試圖創建此圖表： http://bl.ocks.org/wvengen/cab9b01816490edb7083 d3圖表sankey json錯誤

但是，每當發生錯誤和瀏覽器崩潰。發生此錯誤是因爲我的json中的一些項目，但我不知道錯誤的正確原因。

文檔實例的JSON是這樣的：

https://rawgit.com/q-m/d3.chart.sankey/master/example/data/product.json

我的JSON是這樣的：

{ 
    "nodes":[ 
     { 
     "name":"Biblioteca", 
     "hotspot":169, 
     "id":"biblioteca_score" 
     }, 
     { 
     "name":"Parque da Cidade", 
     "hotspot":171, 
     "id":"parque_da_cidade_score" 
     }, 
     { 
     "name":"Term. Vila Arens", 
     "hotspot":172, 
     "id":"term_vila_arens_score" 
     }, 
     { 
     "name":"Term. Cecap", 
     "hotspot":175, 
     "id":"term_cecap_score" 
     }, 
     { 
     "name":"Term. Central", 
     "hotspot":177, 
     "id":"term_central_score" 
     }, 
     { 
     "name":"Term. Vila Rami", 
     "hotspot":178, 
     "id":"term_vila_rami_score" 
     }, 
     { 
     "name":"Term. Hortolandia", 
     "hotspot":180, 
     "id":"term_hortolandia_score" 
     }, 
     { 
     "name":"Term. Colonia", 
     "hotspot":181, 
     "id":"term_colonia_score" 
     } 
    ], 
    "links":[ 
     { 
     "value":1, 
     "source":2, 
     "target":0 
     }, 
     { 
     "value":1, 
     "source":3, 
     "target":0 
     }, 
     { 
     "value":1, 
     "source":2, 
     "target":1 
     }, 
     { 
     "value":3, 
     "source":3, 
     "target":2 
     }, 
     { 
     "value":7, 
     "source":3, 
     "target":2 
     } 
    ], 
    "colors":{ 
     "biblioteca":"#d0b011", 
     "parque_da_cidade":"#c46be7", 
     "term__cecap":"#3d64e5", 
     "term__central":"#171daf", 
     "term__vila_rami":"#fec7ea", 
     "term__hortolandia":"#af2dfd", 
     "term__colonia":"#dad439" 
    } 
}

所有數據的JSON產生一個錯誤，但如果我只留下下面的數據它的工作原理：

{ 
    "nodes":[ 
     { 
     "name":"Biblioteca", 
     "hotspot":169, 
     "id":"biblioteca_score" 
     }, 
     { 
     "name":"Parque da Cidade", 
     "hotspot":171, 
     "id":"parque_da_cidade_score" 
     }, 
     { 
     "name":"Term. Vila Arens", 
     "hotspot":172, 
     "id":"term_vila_arens_score" 
     }, 
     { 
     "name":"Term. Cecap", 
     "hotspot":175, 
     "id":"term_cecap_score" 
     }, 
     { 
     "name":"Term. Central", 
     "hotspot":177, 
     "id":"term_central_score" 
     }, 
     { 
     "name":"Term. Vila Rami", 
     "hotspot":178, 
     "id":"term_vila_rami_score" 
     }, 
     { 
     "name":"Term. Hortolandia", 
     "hotspot":180, 
     "id":"term_hortolandia_score" 
     }, 
     { 
     "name":"Term. Colonia", 
     "hotspot":181, 
     "id":"term_colonia_score" 
     } 
    ], 
    "links":[ 
     { 
     "value":1, 
     "source":2, 
     "target":0 
     }, 
     { 
     "value":1, 
     "source":3, 
     "target":0 
     }, 
     { 
     "value":1, 
     "source":2, 
     "target":1 
     }, 
     { 
     "value":3, 
     "source":3, 
     "target":2 
     }, 
     { 
     "value":7, 
     "source":3, 
     "target":2 
     } 
    ], 
    "colors":{ 
     "biblioteca":"#d0b011", 
     "parque_da_cidade":"#c46be7", 
     "term__cecap":"#3d64e5", 
     "term__central":"#171daf", 
     "term__vila_rami":"#fec7ea", 
     "term__hortolandia":"#af2dfd", 
     "term__colonia":"#dad439" 
    } 
}

有沒有人有任何想法爲什麼？

來源

2015-11-04 Rafael Silva

例如，您可以分享一些代碼？而你說「因爲我的json有幾件東西」。你確定了哪些項目？ – blm

我用你提到的例子做了一個小提琴，並將它與你的JSON合併。

我沒有看到任何錯誤:)

在這裏工作

var json = { 
 
    "nodes": [{ 
 
     "name": "Biblioteca", 
 
      "hotspot": 169, 
 
      "id": "biblioteca_score" 
 
    }, { 
 
     "name": "Parque da Cidade", 
 
      "hotspot": 171, 
 
      "id": "parque_da_cidade_score" 
 
    }, { 
 
     "name": "Term. Vila Arens", 
 
      "hotspot": 172, 
 
      "id": "term_vila_arens_score" 
 
    }, { 
 
     "name": "Term. Cecap", 
 
      "hotspot": 175, 
 
      "id": "term_cecap_score" 
 
    }, { 
 
     "name": "Term. Central", 
 
      "hotspot": 177, 
 
      "id": "term_central_score" 
 
    }, { 
 
     "name": "Term. Vila Rami", 
 
      "hotspot": 178, 
 
      "id": "term_vila_rami_score" 
 
    }, { 
 
     "name": "Term. Hortolandia", 
 
      "hotspot": 180, 
 
      "id": "term_hortolandia_score" 
 
    }, { 
 
     "name": "Term. Colonia", 
 
      "hotspot": 181, 
 
      "id": "term_colonia_score" 
 
    }], 
 
     "links": [{ 
 
     "value": 1, 
 
      "source": 2, 
 
      "target": 0 
 
    }, { 
 
     "value": 1, 
 
      "source": 3, 
 
      "target": 0 
 
    }, { 
 
     "value": 1, 
 
      "source": 2, 
 
      "target": 1 
 
    }, { 
 
     "value": 3, 
 
      "source": 3, 
 
      "target": 2 
 
    }, { 
 
     "value": 1, 
 
      "source": 3, 
 
      "target": 2 
 
    }], 
 
     "colors": { 
 
     "biblioteca": "#d0b011", 
 
      "parque_da_cidade": "#c46be7", 
 
      "term__cecap": "#3d64e5", 
 
      "term__central": "#171daf", 
 
      "term__vila_rami": "#fec7ea", 
 
      "term__hortolandia": "#af2dfd", 
 
      "term__colonia": "#dad439" 
 
    } 
 
}; 
 
var colors = json.colors; 
 
var chart = d3.select("#chart").append("svg").chart("Sankey.Path"); 
 
chart.name(label) 
 
    .colorNodes(function (name, node) { 
 
    return color(node, 1) || colors.fallback; 
 
}) 
 
    .colorLinks(function (link) { 
 
    return color(link.source, 4) || color(link.target, 1) || colors.fallback; 
 
}) 
 
    .nodeWidth(15) 
 
    .nodePadding(10) 
 
    .spread(true) 
 
    .iterations(0) 
 
    .draw(json); 
 

 
function label(node) { 
 
    return node.name.replace(/\s*\(.*?\)$/, ''); 
 
} 
 

 
function color(node, depth) { 
 
    var id = node.id.replace(/(_score)?(_\d+)?$/, ''); 
 
    if (colors[id]) { 
 
     return colors[id]; 
 
    } else if (depth > 0 && node.targetLinks && node.targetLinks.length == 1) { 
 
     return color(node.targetLinks[0].source, depth - 1); 
 
    } else { 
 
     return null; 
 
    } 
 
}

body { 
 
    padding: 10px; 
 
    min-width: 600px; 
 
    max-width: 1200px; 
 
    margin: auto; 
 
} 
 
#chart { 
 
    height: 500px; 
 
    font: 13px sans-serif; 
 
} 
 
.node rect { 
 
    fill-opacity: .9; 
 
    shape-rendering: crispEdges; 
 
    stroke-width: 0; 
 
} 
 
.node text { 
 
    text-shadow: 0 1px 0 #fff; 
 
} 
 
.link { 
 
    fill: none; 
 
    stroke: #000; 
 
    stroke-opacity: .2; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://rawgit.com/newrelic-forks/d3-plugins-sankey/master/sankey.js"></script> 
 
    <script src="https://rawgit.com/misoproject/d3.chart/master/d3.chart.min.js"></script> 
 
    <script src="https://rawgit.com/q-m/d3.chart.sankey/master/d3.chart.sankey.min.js"></script> 
 
    <body> 
 
    <div id="chart"></div> 
 
</body>

來源

2015-11-05 09:32:21 Cyril

d3圖表sankey json錯誤

回答

相關問題