[英]Error: Invalid value for <g> attribute transform=“translate(undefined,undefined)”
I am having a problem with d3.js with the cluster. 我对群集的d3.js有问题。 It gives me the following error: 它给了我以下错误:
Error: Invalid value for attribute transform="translate(undefined,undefined)" 错误:属性变换的值无效=“translate(undefined,undefined)”
And I have no idea why this gives it to me. 我不知道为什么这会给我。
Code: 码:
var loadd3 = function () {
function elbow(d, i) {
return "M" + (d.source.y + 100) + "," + d.source.x + "V" + d.target.x + "H" + (d.target.y + 100);
}
var width = (window.innerWidth - 100),
height = (window.innerHeight - 20);
var cluster = d3.layout.cluster()
.size([height, width - 160]);
var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.y, d.x];
});
d3.select("svg").remove();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,0)");
var root = dataSource;
var nodes = cluster.nodes(root),
links = cluster.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 "translate(" + d.y + "," + d.x + ")";
})
node.append("rect")
.attr("width", 120)
.attr("height", 60)
.attr("y", -30)
.attr("rx", 5)
.attr("ry", 5);
node.append("rect")
.attr("class", "header")
.attr("width", 120)
.attr("height", 10)
.attr("y", -30)
.attr("rx", 5)
.attr("ry", 5);
node.append("text")
.attr("x", function (d) {
return d.children ? 60 : 15
})
.attr("dy", -6)
.attr("class", function (d) {
return d.children ? "" : "url";
})
.on("click", function (d) {
if (!d.children) {
window.open("http://google.com");
}
})
.style("text-anchor", function (d) {
return d.children ? "end" : "start";
})
.text(function (d) {
return d.BaanNo;
});
node.append("text")
.attr("x", function (d) {
return d.children ? 60 : 15
})
.attr("dy", 12)
.style("text-anchor", function (d) {
return d.children ? "end" : "start";
})
.text(function (d) {
return d.OrderId;
});
node.append("text")
.attr("x", function (d) {
return d.children ? 60 : 15
})
.attr("dy", 12)
.style("text-anchor", function (d) {
return d.children ? "end" : "start";
})
.text(function (d) {
return d.ItNo;
});
node.append("text")
.attr("x", function (d) {
return d.children ? 60 : 15
})
.attr("dy", 12)
.style("text-anchor", function (d) {
return d.children ? "end" : "start";
})
.text(function (d) {
return d.dateTime;
});
node.append("text")
.attr("x", function (d) {
return d.children ? 60 : 15
})
.attr("dy", 12)
.style("text-anchor", function (d) {
return d.children ? "end" : "start";
})
.text(function (d) {
return d.gewicht;
});
d3.select(self.frameElement).style("height", height + "px");
};
I am new to d3. 我是d3的新手。
The reason for this error is, dx
and dy
properties are undefined
at sometimes. 出现此错误的原因是,有时dx
和dy
属性undefined
。
Seems like not every object in nodes
array have x
and y
properties. 似乎并非nodes
数组中的每个对象都具有x
和y
属性。 Verify it by console logging nodes
array. 通过控制台记录nodes
阵列验证它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.