我如何告诉D3使树形图垂直(自上而下)而不是从左到右? [英] How do I tell D3 to make the dendrogram vertical (top down) instead of left to right?
本文介绍了我如何告诉D3使树形图垂直(自上而下)而不是从左到右?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在查看此示例使用群集布局来分配X和Y坐标到树形图上的节点。如何告诉集群垂直布局,自上而下 /ex/cluster.htmlrel =noreferrer>示例你链接,只需翻转使用X和Y坐标。这可以通过改变
var diagonal = d3.svg.diagonal()
.projection ){return [dy,dx];});
和
var node = vis.selectAll(g.node)
.data(nodes)
.enter()。append(g)
.attr ,node)
.attr(transform,function(d){returntranslate(+ dy +,+ dx +);})
到
var diagonal = d3 .svg.diagonal()
//翻转这里的值。
.projection(function(d){return [d.x,d.y];});
和
var node = vis.selectAll(g.node)
.data(nodes)
.enter()。append(g)
.attr ,node)
//翻转这里的值。
.attr(transform,function(d){returntranslate(+ dx +,+ dy +);})
以下是 JSFiddle 显示上述动作变化。
I'm looking at this example that uses cluster layout to assign the X and Y coordinates to nodes on a dendrogram. How can I tell cluster to layout vertically, top down, instead of the default left to right?
解决方案
For the example you link, just flip the use of the X and Y coordinates. This can be done by changing
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
and
var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
to
var diagonal = d3.svg.diagonal()
// Flip the values here.
.projection(function(d) { return [d.x, d.y]; });
and
var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
// Flip the values here.
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
Here is a JSFiddle showing the above changes in action.
这篇关于我如何告诉D3使树形图垂直(自上而下)而不是从左到右?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文