编程语言
首页 > 编程语言> > javascript-在d3力向图中使用曲线

javascript-在d3力向图中使用曲线

作者:互联网

我想通过d3强制布局可视化一些数据.

但是,连接节点的链接是直线.但是数据
可能具有连接两个节点的多个边.所以直线
强制布局无法正确显示所有这些.我试图追加
链接而非路径的路径.但这没有用.我不知道
是否是因为我以错误的方式或用力使用它
布局不接受路径作为链接.

解决方法:

使用svg:行插入的路径

var viz = d3.select("body")
    .insert("svg:svg", "h2")
    .attr("width", "100%")
    .attr("height", "100%")

.
.
.
.
.
.
.
.

    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var path = svg.selectAll("path").data(force.links()).enter()
                .append("svg:path").attr("source", function(d) {
                    return d.source.id;
                }).attr("target", function(d) {
                    return d.target.id;
                }).attr("class", "link").attr('marker-end', 'url(#head)');

这里源和目标是结点,在’svg:path’的’d’属性中指定的曲线,而marker-end属性用于箭头

标签:svg,d3-js,force-layout,javascript
来源: https://codeday.me/bug/20191201/2078848.html