d3.svg.diagonal()在哪里？
d3.svg.diagonal()在哪里？
提问于 2016-11-28 13:08:35
正如提到的这里，我试图执行可折叠树的代码。但是，对角方法似乎不适用于v4 (我可能错了)。
适用于：
var diagonal = d3.svg.diagonal()我知道这个错误：
TypeError:无法读取未定义的属性“对角线”
在v4中，什么是等价的？查看D3.jsAPI引用并没有给我任何线索。
回答 5
Stack Overflow用户
回答已采纳
发布于 2017-06-26 13:03:55
D3版本4.9.0引入了连杆形状，它具有与D3 v3中的旧d3.svg.diagonal相同的功能。
根据API接口
链接形状从源点到目标点生成光滑的三次Bézier曲线。曲线在开始和结束时的切线不是垂直的，就是水平的，或者是径向的。
有三种方法：
因此，对于链接的可折叠树，您可以将path d属性定义为：
.attr("d", d3.linkHorizontal()
.x(function(d) { return d.y; })
.y(function(d) { return d.x; }));Demo
假设您有一个具有source和target的对象，每个对象都具有x和y属性：
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;
});然后，只需将数据传递给链接生成器，就可以绘制路径：
.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>
Stack Overflow用户
发布于 2016-11-28 14:18:52
参见GitHub发布这里。
虽然问题还没有解决，但Bostock先生似乎并不急于在第4版中重新实现它。为什么？因为实现自己是微不足道的：
function link(d) {
return "M" + d.source.y + "," + d.source.x
+ "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
+ " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
+ " " + d.target.y + "," + d.target.x;
}Stack Overflow用户
发布于 2019-04-26 16:14:31
我在这件事上经历了一段非常艰难的日子，过了几个小时，我意识到它是多么的容易(就像其他人提到的那样)。取代：
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });...with这个：
var diagonal = function link(d) {
return "M" + d.source.y + "," + d.source.x
+ "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
+ " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
+ " " + d.target.y + "," + d.target.x;
};这应该是唯一的改变。希望这能帮到其他人。这应该适用于像帕特里克·布罗克曼的可折叠/可搜索树这样的可视化。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40845121
复制相关文章
相似问题
腾讯云开发者
