通过javascript/D3加载json

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

我粘贴了下面的代码并附加了控制台输出，我无法理解为什么控制台上的结果/输出会有所不同。非常感谢您的帮助

文件内容：

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

代码：

var margin={top:16，right:0，bottom:0，left:0}
，宽度=950-边距.左-边距.右
，高度=700-margin.top-margin.bottom；
var svg=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var dataParser=函数（d）{
变量r={
法案：编号（d.sc），
id：编号（d.sn），
x:parseFloat（d.sc）+Math.random（），
y:parseFloat（d.sc）+Math.random（），
半径：5
};
返回r
}
var节点=[]；
var数据集；
json（“data/event.json”，函数（错误，数据）{
数据集=数据；
dataset.forEach（函数（d）{
new_r=数据解析器（d）；
控制台日志（新的）；
节点推送（新的）；
console.log（节点）；
});   
});
//力定向布局
var-force=d3.layout.force（）
.节点（节点）
.尺寸（[宽度、高度]）
.重力（0）
.收费（0）
.摩擦力（.91）
.on（“滴答”，滴答）
.start（）；
//为每个节点绘制圆。
var circle=svg.selectAll（“circle”）
.数据（节点）
.enter（）.append（“圆”）
.attr（“id”，函数（d）{return d.id；}）
.attr（“类”、“节点”）
.style（“fill”，函数（d）{返回颜色（d.act）；}）；
功能勾号（e）{
圆圈
.style（“fill”，函数（d）{返回颜色（d.act）；}）
}
功能颜色（活动）{
变量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”，
}
返回colorByActivity[活动]；
}

奇怪的是，当我在控制台上展开json对象时，即使它为x和y显示了正确的值，但展开的对象显示的是Nan，我可以绕着它转

---

我正在使用chrome中的开发工具。提前谢谢。

通常我会结束这个问题，因为它重复了很多次，但我会在回答时添加一些d3帮助

首先，您的大问题，

d3.json

是一个异步操作。当它完成时，它触发一个回调函数（它的第二个参数）。下面的代码

d3.json

构建了您的强制布局，它实际上是在

d3.json

完成之前执行的。它需要在回调中执行

第二，结合svg/d3：

你的圆没有半径，它们不会出现

在勾号函数中不定位圆

您不需要所有的数字转换和浮点解析，它什么都不做

---

---

.

我无法复制您的。此外，还有更多的代码您没有与我们共享。例如，是什么创建了

px

和

py

值？此外，当您打印到控制台并展开时，您可以看到内存中当前的值。不是你打印它时的样子。谢谢马克的回复，我已经粘贴了我正在使用的全部代码。我看不到我试图动态绘制的圆圈，控制台显示x和y值为Nan。是否有其他方法可以查看/保留x和y的值以进行调试。抱歉，这可能是一个愚蠢的问题，我刚刚开始学习JS。非常感谢您的提示和帮助：-）

<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>