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的事情：

您的圈子没有半径，不会出现
您不能将圈子定位在勾号功能
你不需要所有的数字转换和浮点解析，它没有做任何事情

Here it is running a bit better

通过javascript / D3加载json

1 个答案: