我正在尝试使用 Javascript 对象创建一个小树形图。我正在使用 D3 并尝试说明元素(键、id)的嵌套结构而不是它们的值。
我的JSFiddle
var d1 = {
"time_completed": 1420199657,
"xid": "-dqAeAEjGxCDcjqrxHsraER3yWqew4xS",
"title": "for 8h 46m",
"time_created": 1420167382,
"time_updated": 1420200033,
"details": {
"body": 0,
"sound": 12598,
"tz": "America/Chicago",
"awakenings": 0,
"light": 18970,
"mind": 0,
"asleep_time": 1420168079,
"awake_time": 1420199400,
"awake": 707,
"rem": 0,
"duration": 32275,
"smart_alarm_fire": 1420199640,
"quality": 100,
"sunset": 0,
"sunrise": 0
},
"date": 20150102,
"shared": true,
"snapshot_image": "/nudge/image/e/1420200033/-dqAeAEjGxCDcjqrxHsraER3yWqew4xS/MSh0lOvjHDY.png",
"sub_type": 0
};
var tree = d3.layout.tree()
.size([360, diameter / 2 - 120])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
var svg = d3.select("#sleep-schema").append("svg")
.attr("width", diameter)
.attr("height", diameter - 150)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
var nodes = tree.nodes(d1),
links = tree.links(nodes);
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
.text(function(d) { return d.xid; });
}
由于某种原因,调用 d3.layout.tree 在我的 x 坐标上给出了 NaN 值
Error: Invalid value for <g> attribute transform="rotate(NaN)translate(0)"
谁能告诉我我的问题是数据的形状还是我对d3.layout.tree()
的使用?
更新:@Cyril,我已将数据对象从数组转换为 JS 对象,但 d3.layout.tree() 似乎无法遍历嵌套的 JSON 对象并计算 x,y 值。我倾向于同意你的观点,这是我的数据的问题。我一直在尝试关注this example .
最佳答案
您的 JSON 数据是一个数组。 树布局需要一个对象而不是数组。
您的数据:
d1 = [{
"time_completed": 1420199657,
"xid": "-dqAeAEjGxCDcjqrxHsraER3yWqew4xS",
"title": "for 8h 46m",
"time_created": 1420167382,
"time_updated": 1420200033,
"details": { ...
"sunset": 0,
"sunrise": 0
},
"date": 20150102,
"shared": true,
"snapshot_image": "/nudge/image/e/1420200033/-dqAeAEjGxCDcjqrxHsraER3yWqew4xS/MSh0lOvjHDY.png",
"sub_type": 0
}];
应该是:
d1 = {
"time_completed": 1420199657,
"xid": "-dqAeAEjGxCDcjqrxHsraER3yWqew4xS",
"title": "for 8h 46m",
"time_created": 1420167382,
"time_updated": 1420200033,
"details": {
"body": 0,
"sound": 12598, ...
},
"date": 20150102,
"shared": true,
"snapshot_image": "/nudge/image/e/1420200033/-dqAeAEjGxCDcjqrxHsraER3yWqew4xS/MSh0lOvjHDY.png",
"sub_type": 0
};
请引用这个简单的示例来了解数据结构应该如何。 http://bl.ocks.org/d3noob/8375092
工作代码here 希望这有帮助!
关于javascript - D3js 树形图 NaN x 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34601386/