javascript - 通过javascript/D3加载json

Question

我正在尝试加载一个 json 文件，然后对其进行一些处理，但是对于我在控制台中加载和显示的某些值，我得到 Nans 。

我粘贴了下面的代码并附加了控制台输出，但我无法弄清楚为什么控制台上的结果/输出有所不同。非常感谢任何帮助

文件内容:

[
   {"sn": 12312312, "sc":0 , "dn": 42131221, "dc":1 }
 , {"sn": 42131221, "sc":1 , "dn": 21422111, "dc":2 }
]

代码:

<script src="js/d3-3-5-5.min.js"> </script>
<script type="text/javascript">
var margin = {top: 16, right: 0, bottom: 0, left: 0}
,width = 950 - margin.left - margin.right
,height = 700 - margin.top - margin.bottom;

var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");  

var dataParser = function(d) {
    var r= {
        act: Number(d.sc),
        id: Number(d.sn),
        x: parseFloat(d.sc) + Math.random(),
        y: parseFloat(d.sc) + Math.random(),
        radius: 5
    };
    return r

   }

var nodes = [];
var dataset;
d3.json("data/event.json", function(error, data) {    
dataset=data;
dataset.forEach(function(d) {
    new_r = dataParser(d);
    console.log(new_r);
    nodes.push(new_r);
    console.log(nodes);
 });   
});


// Force-directed layout
var force = d3.layout.force()
    .nodes(nodes)
    .size([width, height])
    .gravity(0)
    .charge(0)
    .friction(.91)
    .on("tick", tick)
    .start();



// Draw circle for each node.

var circle = svg.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("id", function(d) { return d.id; })
    .attr("class", "node")
    .style("fill", function(d) { return color(d.act); });  

function tick(e) {
   circle
     .style("fill", function(d) { return color(d.act); })
}

function color(activity) {

var colorByActivity = {
    "0": "#e0d400",
    "1": "#1c8af9",
    "2": "#51BC05",
    "3": "#FF7F00",
    "4": "#DB32A4",
    "5": "#00CDF8",
    "6": "#E63B60",
    "7": "#8E5649",
    "8": "#68c99e",
    "9": "#a477c8",
    "10": "#5C76EC",
    "11": "#E773C3",
    "12": "#799fd2",
    "13": "#038a6c",
    "14": "#cc87fa",
    "15": "#ee8e76",
    "16": "#bbbbbb",
  }

return colorByActivity[activity];

}

</script>

奇怪的是，当我在控制台上展开 json 对象时，即使它显示了 x 和 y 的正确值，展开的对象也显示了 Nan，我可以对此进行思考。

我正在使用 Chrome 中的开发人员工具。提前致谢。

Answer 1

通常我会关闭这个问题，因为它多次重复，但我会在回答过程中添加一些 d3 帮助。

首先，你的大问题是，d3.json 是一个异步操作。当它完成时，它会触发一个回调函数(你的第二个参数)。 d3.json 下面用于构建强制层的代码实际上是在 d3.json 完成之前执行的。它需要在回调中执行。

第二，几个 svg/d3 的东西:

1. 您的圆圈没有半径，因此不会出现
2. 您没有将圆圈放置在刻度函数中
3. 您不需要所有数字转换和浮点解析，它没有做任何事情

<小时/>

Here it is running a bit better .