[英]cant render links for d3 radial tree
I'm a complete newbie to D3. 我是D3的新手。
I'm trying to generate a D3 radial tree. 我正在尝试生成D3径向树。 So, each node has properties x0 and y0 which indicate its co-ordinates on the canvas.
因此,每个节点都有属性x0和y0,它们指示其在画布上的坐标。
I used the following code to generate the links : 我使用以下代码生成链接:
var diagonal = d3.svg.diagonal()
.projection(function (d) {
debugger;
return [d.y0, d.x0];
});
I use it in the following manner : 我以以下方式使用它:
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
However, I get the following error type : 但是,我得到以下错误类型:
Error: Invalid value for <path> attribute d="M0,0C, , -145.62305898749054,105.80134541264516" attrFunction
错误:<路径>属性d =“ M0,0C,,-145.62305898749054,105.80134541264516” attrFunction的值无效
(anonymous function)(匿名功能)
d3_selection_each d3_selectionPrototype.eachd3_selection_each d3_selectionPrototype.each
d3_selectionPrototype.attrd3_selectionPrototype.attr
(anonymous function)(匿名功能)
(anonymous function)(匿名功能)
event respond事件回应
All my tree nodes have x0 and y0 properties (None of the nodes have them undefined). 我所有的树节点都具有x0和y0属性(没有一个节点未定义)。
Thanks! 谢谢!
Couple issues: 几个问题:
1) svg.selectAll(".link") should be d3.selectAll. 1)svg.selectAll(“。link”)应该是d3.selectAll。 Maybe you have svg = d3.select("svg") though
也许您有svg = d3.select(“ svg”)
2) Should you be returning dx and dy instead of d.x0 and d.y0 according to https://github.com/mbostock/d3/wiki/SVG-Shapes#diagonal 2)是否应该根据https://github.com/mbostock/d3/wiki/SVG-Shapes#diagonal返回dx和dy而不是d.x0和d.y0
diagonal.projection([projection])
对角线投影([投影])
If projection is specified, sets the projection to the specified function.
如果指定了投影,则将投影设置为指定的功能。 If projection is not specified, returns the current projection.
如果未指定投影,则返回当前投影。 The projection converts a point (such as that returned by the source and target accessors) of the form {x, y} to a two-element array of numbers.
投影将{x,y}形式的点(例如源访问者和目标访问者返回的点)转换为数字的两个元素的数组。 The default accessor assumes that the input point is an object with x and y attributes:
默认访问器假定输入点是具有x和y属性的对象:
function projection(d) { return [dx, dy]; }
I tried to modify your code: 我试图修改您的代码:
var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.y, d.x];
});
var link = d3.select("svg")//added
.append("g")//added
.selectAll("path")//modified
.data(links)
.enter().insert("path", "g")//modified
.attr("class", "link")
.attr("d", diagonal);
Here is some sample code that may be helpful: 以下是一些可能有用的示例代码:
nestedData = d3.nest()
.key(function (el) { return el.user })
.entries(incData);
packableData = { id: "root", values: nestedData }
var depthScale = d3.scale.category10([0, 1, 2]);
var treeChart = d3.layout.tree();
treeChart.size([500, 500])
.children(function (d) { return d.values });
var linkGenerator = d3.svg.diagonal();
d3.select("svg")
.append("g")
.attr("id", "treeG")
.selectAll("g")
.data(treeChart(packableData))
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")"
});
//circle representing each node that we color with same scale used for circle pack
d3.selectAll("g.node")
.append("circle")
.attr("r", 10)
.style("fill", function (d) { return depthScale(d.depth) })
.style("stroke", "white")
.style("stroke-width", "2px");
d3.selectAll("g.node")
.append("text")
.text(function (d) { return d.id || d.key || d.content })
d3.select("#treeG").selectAll("path")
.data(treeChart.links(treeChart(packableData)))
.enter().insert("path", "g")
.attr("d", linkGenerator)
.style("fill", "none")
.style("stroke", "black")
.style("stroke-width", "2px");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.