0

我在创建图表时出现错误，有人可以帮助我吗？我正在尝试创建此图表： http ://bl.ocks.org/wvengen/cab9b01816490edb7083

但是每当发生错误并且浏览器崩溃时。发生此错误是因为我的 json 中的一些项目，但我不知道错误的正确原因。

文档示例的 json 是这样的：

https://rawgit.com/qm/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"
   }
}

有谁知道为什么？

4

1 回答 1

0

我对您作为示例引用的上述示例进行了修改，并将其与您的 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-05T09:32:21.723 回答