Javascript d3.js超出最大调用堆栈大小错误
当我尝试布局我的力定向图时，以下是我收到的错误。我在Mike Bostock的github页面上读到了这个问题，发现这可能是由于坐标的NaN值或在同一点上绘制的所有点造成的。我检查了控制台，发现我所有的点都是以相同的X和Y值绘制的 在一个示例数据上，代码运行得非常好，但现在不再运行了。我的数据离中心节点大约45-50层。我已经成功地用这些数据做了一个树布局。想要尝试强制导向布局，但它不起作用 任何关于如何在单独坐标上绘制节点的帮助都将不胜感激Javascript d3.js超出最大调用堆栈大小错误,javascript,json,d3.js,force-layout,Javascript,Json,D3.js,Force Layout,当我尝试布局我的力定向图时，以下是我收到的错误。我在Mike Bostock的github页面上读到了这个问题，发现这可能是由于坐标的NaN值或在同一点上绘制的所有点造成的。我检查了控制台，发现我所有的点都是以相同的X和Y值绘制的 在一个示例数据上，代码运行得非常好，但现在不再运行了。我的数据离中心节点大约45-50层。我已经成功地用这些数据做了一个树布局。想要尝试强制导向布局，但它不起作用 任何关于如何在单独坐标上绘制节点的帮助都将不胜感激 <!DOCTYPE html> <
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 10, right: 10, bottom: 20, left: 40},
width = 1300 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
var color = d3.scale.category20();
var force = d3.layout.force().charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg:svg")
.attr("width", width)
.attr("height", height)
//.attr("pointer-events","all")
.append('svg:g')
//.call(d3.behavior.zoom().translate([100,50]).scale(.5).on("zoom",redraw))
.append('svg:g')
.attr("transform","translate(100,50)scale(.5,.5)");
svg.append('svg:rect')
.attr('width', width)
.attr('height', height)
.attr('fill','white')
.attr('opacity',0);
function redraw() {
var trans = d3.event.translate;
var scale = d3.event.scale;
svg.attr("transform",
"translate(" + trans + ")"
+ " scale(" + scale + ")");
};
d3.json("test_data.json", function(error, graph) {
var nodeMap = {};
graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
graph.links = graph.links.map(
function(x)
{
return {
source: nodeMap[x.source],
target: nodeMap[x.target],
value: x.value
};
});
console.log(graph.nodes);
console.log(graph.links);
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke", function(d) { return color(d.value); })
.style("stroke-width", function(d) {
//console.log(d.value);
return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.value); })
.call(force.drag)
.on("mousedown",
function(d) {
d.fixed = true;
d3.select(this).classed("sticky", true);
}
)
.on("mouseover",fade(0.1))
.on("mouseout",fade(1));
var linkedByIndex = {};
graph.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
}
node.append("title")
.text(function(d) {
return "Name : "+d.name+"\n"+"Parent: "+d.parent +"\n"+"Relationship: "+ d.relationship +"\n"+ "Creation Date: "+ d.cod +"\n"; });
function fade(opacity)
{
return function(d) {
node.style("stroke-opacity", function(o) {
thisOpacity = isConnected(d, o) ? 1 : opacity;
this.setAttribute('fill-opacity', thisOpacity);
return thisOpacity;
});
link.style("stroke-opacity", opacity).style("stroke-opacity", function(o) {
return o.source === d || o.target === d ? 1 : opacity;
});
};
}
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
/*node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });*/
});
});
</script>
force
.nodes(graph.nodes)
.links(graph.links)
.start();
"start();"
在数据中，链接指向的是名称，而不是索引。从中查看示例数据
链接的形式为：
{“源”：1，“目标”：0，“值”：1}链接的形式为：
{“source”：1，“target”：0，“value”：1}"start();"