问题描述
我试图执行提到的此处的可折叠树代码.但是似乎对角线方法不适用于v4(我可能错了).
I was trying to execute the code of collapsible-tree as mentioned here. But it seems the diagonal method is not applicable in v4 (I may be wrong).
针对:
var diagonal = d3.svg.diagonal()
我收到此错误:
v4中的等效项是什么?看d3.js API参考并没有给我任何线索.
What is the equivalent in v4? Looking at d3.js API reference didn't give me any clue.
推荐答案
D3版本4.9.0引入了链接形状,其功能与D3 v3中的旧d3.svg.diagonal
相同.
D3 version 4.9.0 introduced link shapes, which have the same functionality of the old d3.svg.diagonal
in D3 v3.
根据 API :
共有三种方法:
- d3.linkHorizontal()
- d3.linkVertical()
- d3.linkRadial()
因此,对于链接的那棵可折叠树,您将路径d
属性定义为:
So, for a collapsible tree like that one you linked, you define the path d
attribute as:
.attr("d", d3.linkHorizontal()
.x(function(d) { return d.y; })
.y(function(d) { return d.x; }));
演示:
假设您有一个具有source
和target
的对象,每个对象都具有x
和y
属性:
Suppose you have an object with source
and target
, each one with x
and y
properties:
var data = {
source: {
x: 20,
y: 10
},
target: {
x: 280,
y: 100
}
};
首先,您创建链接生成器:
First, you create the link generator:
var link = d3.linkHorizontal()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
});
然后您只需将数据传递给链接生成器即可绘制路径:
And then you can draw the path just by passing that data to the link generator:
.attr("d", link(data))
这是演示:
var svg = d3.select("svg");
var data = {
source: {
x: 20,
y: 10
},
target: {
x: 280,
y: 100
}
};
var link = d3.linkHorizontal()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
});
svg.append("path")
.attr("d", link(data))
.style("fill", "none")
.style("stroke", "darkslateblue")
.style("stroke-width", "4px");
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
这篇关于d3.svg.diagonal()在哪里?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!