D3 树图 - 使用直线而不是对角线时如何转换链接
D3 Tree Graph - How to transition links when using straight line, not diagonal
我正在使用这个 JS Fiddle:http://jsfiddle.net/f1nzagyw/
我想将示例从对角线更改为直线,我已经能够做到,但是当我单击节点以展开或缩短图表时,旧链接不会从图表中删除,所以我最终得到了多个链接。有人可以建议我如何使用直线和过渡节点来过渡原始链接吗?当我从对角线移动到直线时,它似乎发生了变化。
我添加了 lineFunction 并在链接中使用了它,如您在 fiddle,:
中所见
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
我还附加了 "line" 和 x/y 坐标:
var link = svg.selectAll("path.link")
.data(links)
.enter().append("line")
.attr("class", "link")
.attr("x1", function(d) { return d.source.y; })
.attr("y1", function(d) { return d.source.x; })
.attr("x2", function(d) { return d.target.y; })
.attr("y2", function(d) { return d.target.x; });
此外,将链接保留在节点后面的最佳方法是什么,以便链接 运行 位于节点后面,而不是前面?我以为我只需要将链接的代码放在节点上方,但这似乎不起作用。
感谢任何帮助。
谢谢
问题 1
旧链接没有更新
您正在做:
var link = svg.selectAll("path.link")
.data(links)
这是错误的,因为没有path
DOM 有line
DOM 所以你选错了
你应该做的:
var link = svg.selectAll(".link")
.data(links)
问题2
保持链接在节点后面的最佳方式:
先创建链接,然后创建节点,现在链接将显示在节点后面。
//create link first
link.enter().append("line")
.attr("class", "link")
.attr("x1", function(d) {
return d.source.y;
})
.attr("y1", function(d) {
return d.source.x;
})
.attr("x2", function(d) {
return d.target.y;
})
.attr("y2", function(d) {
return d.target.x;
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", lineFunction)
.attr("x1", function(d) {
return d.source.y;
})
.attr("y1", function(d) {
return d.source.x;
})
.attr("x2", function(d) {
return d.target.y;
})
.attr("y2", function(d) {
return d.target.x;
});;
// Transition exiting nodes to the parent's new position.
link.exit()
.remove();
//create nodes
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
工作代码here
编辑
为了保证节点总是在最前面做两个组。
var svglink = svg.append("g");//add links inside this group
var svgnode = svg.append("g");//add nodes inside this group
现在,当您创建链接时,请执行此操作以确保它们位于节点下方。
// Update the links…
var link = svglink.selectAll(".link")
.data(links)
// Update the nodes…
var node = svgnode.selectAll("g.node")
.data(nodes, function(d) {
return d.id || (d.id = ++i);
});
工作示例here
我正在使用这个 JS Fiddle:http://jsfiddle.net/f1nzagyw/
我想将示例从对角线更改为直线,我已经能够做到,但是当我单击节点以展开或缩短图表时,旧链接不会从图表中删除,所以我最终得到了多个链接。有人可以建议我如何使用直线和过渡节点来过渡原始链接吗?当我从对角线移动到直线时,它似乎发生了变化。
我添加了 lineFunction 并在链接中使用了它,如您在 fiddle,:
中所见 var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
我还附加了 "line" 和 x/y 坐标:
var link = svg.selectAll("path.link")
.data(links)
.enter().append("line")
.attr("class", "link")
.attr("x1", function(d) { return d.source.y; })
.attr("y1", function(d) { return d.source.x; })
.attr("x2", function(d) { return d.target.y; })
.attr("y2", function(d) { return d.target.x; });
此外,将链接保留在节点后面的最佳方法是什么,以便链接 运行 位于节点后面,而不是前面?我以为我只需要将链接的代码放在节点上方,但这似乎不起作用。
感谢任何帮助。 谢谢
问题 1
旧链接没有更新
您正在做:
var link = svg.selectAll("path.link")
.data(links)
这是错误的,因为没有path
DOM 有line
DOM 所以你选错了
你应该做的:
var link = svg.selectAll(".link")
.data(links)
问题2
保持链接在节点后面的最佳方式:
先创建链接,然后创建节点,现在链接将显示在节点后面。
//create link first
link.enter().append("line")
.attr("class", "link")
.attr("x1", function(d) {
return d.source.y;
})
.attr("y1", function(d) {
return d.source.x;
})
.attr("x2", function(d) {
return d.target.y;
})
.attr("y2", function(d) {
return d.target.x;
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", lineFunction)
.attr("x1", function(d) {
return d.source.y;
})
.attr("y1", function(d) {
return d.source.x;
})
.attr("x2", function(d) {
return d.target.y;
})
.attr("y2", function(d) {
return d.target.x;
});;
// Transition exiting nodes to the parent's new position.
link.exit()
.remove();
//create nodes
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
工作代码here
编辑
为了保证节点总是在最前面做两个组。
var svglink = svg.append("g");//add links inside this group
var svgnode = svg.append("g");//add nodes inside this group
现在,当您创建链接时,请执行此操作以确保它们位于节点下方。
// Update the links…
var link = svglink.selectAll(".link")
.data(links)
// Update the nodes…
var node = svgnode.selectAll("g.node")
.data(nodes, function(d) {
return d.id || (d.id = ++i);
});
工作示例here