时间戳

首页 > 解决方案 > 使用 d3.js v4 加载大型 json 文件时出现问题

javascript - 使用 d3.js v4 加载大型 json 文件时出现问题

问题描述

当我尝试使用 d3.json (d3.js v4) 加载一个小的 json 文件时，我加载它没有问题。但是，当我尝试加载一个包含 5,036 个条目的较大文件时，看起来该文件只是部分加载，这弄乱了我在下游生成的散点图中的轴。

我的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <script src="http://d3js.org/d3.v4.min.js"></script>-->

    <title></title>

    <style type="text/css">
    </style>
</head>
<body>
</body>

<script type="text/javascript">
//d3.json("test_json_small.json", function(error, json) {
d3.json("test_json_large.json", function(error, json) {
    if (error) return console.warn(error);

    curr_data = json.nodes;
    console.log(d3.max(json.nodes, function (d) { return d.posx; }));
    console.log(d3.max(json.nodes, function (d) { return d.posy; }));
    console.log(d3.min(json.nodes, function (d) { return d.posx; }));
    console.log(d3.min(json.nodes, function (d) { return d.posy; }));

});
//Downstream code to generate axis, plot, data, etc.
/*
var xScale = d3.scaleLinear().range([0, width]);
var yScale = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
*/

</script>
</html>

当我指定一个包含 10 个元素的小型 json 文件时，我在控制台中得到以下输出（这是我所期望的）：

26.4137007365
9.91588072476
-17.2945742046
-0.222771036376

但是，在加载完整的 json 文件时，最大值和最小值没有意义：

9.9872339424
9.99461717677
-0.00210396968253
-0.00282843924648

因此，我的轴范围不是应有的范围。我没有显示绘图的结果，但轴的有效范围是 0 到 10。任何帮助将不胜感激。

标签： javascriptjsond3.js

解决方案

推荐阅读