D3.js Error: <g> attribute transform: Expected number, “translate(NaN,NaN)”
Question
I am trying to build a data visualization with d3 and I am running into the following error in my console.
Error: <g> attribute transform: Expected number, "translate(NaN,NaN)".
I have taken inspiration from this Plunker and tweaked a few things to make it compatible with my own data.
http://plnkr.co/edit/FiUrNHNMAXd7EBpr5uY5?p=preview&preview
Any help would be immensely appreciated.
My index.html is exactly the same.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Here is my script.js
var width = 960,
height = 500,
padding = 1.5, // separation between same-color nodes
clusterPadding = 6, // separation between different-color nodes
maxRadius = 100;
minRadius = 1;
d3.csv("modified_data_happy.csv", function(data) {
m = d3.max(data, function(d){return d.city_index});
console.log("m", m);
color = d3.scale.category10()
.domain(d3.range(m));
clusters = new Array(m);
dataset = data.map(function(d) {
var r = parseInt(d.Happy);
// var r = d.Happy;
var dta = {
cluster: d.city_index,//group
name: d.name,//label
radius: r,//radius
x: Math.cos(d.city_index / m * 2 * Math.PI) * 100 + width / 2 + Math.random(),
y: Math.sin(d.city_index / m * 2 * Math.PI) * 100 + height / 2 + Math.random()
};
//add the one off the node inside teh cluster
if (!clusters[d.city_index] || (d.Happy > clusters[d.city_index].radius))
clusters[d.city_index] = dta;
console.log("dta", dta);
return dta;
});
console.log('dataset', dataset);
makeGraph(dataset);
});
function makeGraph(nodes) {
var force = d3.layout.force()
.nodes(nodes)
.size([width, height])
.gravity(.02)
.charge(0)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var node = svg.selectAll("circle")
.data(nodes)
.enter().append("g").call(force.drag);
node.append("circle")
.style("fill", function(d) {
return color(d.cluster);
}).attr("r", function(d) {
return d.Happy
})
node.append("text")
.text(function(d) {
return d.name;
})
.attr("dx", -10)
.attr("dy", ".35em")
.text(function(d) {
return d.name
})
.style("stroke", "none");
function tick(e) {
node.each(cluster(10 * e.alpha * e.alpha))
.each(collide(.5))
// .attr("transform", functon(d) {});
.attr("transform", function(d) {
var k = "translate(" + d.x + "," + d.y + ")";
return k;
})
}
// Move d to be adjacent to the cluster node.
function cluster(alpha) {
return function(d) {
var cluster = clusters[d.cluster];
if (cluster === d) return;
var x = d.x - cluster.x,
y = d.y - cluster.y,
l = Math.sqrt(x * x + y * y),
r = d.Happy + cluster.radius;
if (l != r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
cluster.x += x;
cluster.y += y;
}
};
}
// Resolves collisions between d and all other circles.
function collide(alpha) {
var quadtree = d3.geom.quadtree(nodes);
return function(d) {
var r = d.Happy + maxRadius + Math.max(padding, clusterPadding),
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.Happy + quad.point.radius + (d.cluster === quad.point.cluster ? padding :
clusterPadding);
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
};
}
}
My csv file looks like this (I replaced 'group' with 'city_index, and 'radius' with 'Happy'). That's it.
index | name | city_index | Happy -----> Header Row
0 | Joe | 3 | 60 -----> Data Row
So that's where I am right now. I'm not sure why it's not working as the data structures I replaced the example with are the same. I tried removing the parser to no avail. I also tried modifying the "transform, translate" properties as well.
Any help would be immensely appreciated.
1 answers
solution1
1 ACCPTED 2020-12-08 17:00:57
The problem indicates an SVG element group ( tag ) has NaN for position coordinates. I see a problem maybe here in your code: .attr("dy", ".35em") Try to get rid of the em value and use raw numbers. I'm not certain it will solve your problem though, if you could post the error in the console and the element it applies to I could help you more.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.