本文介绍了d3.svg.diagonal()在哪里?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图执行提到的此处的可折叠树代码.但是似乎对角线方法不适用于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; }));

演示:

假设您有一个具有sourcetarget的对象,每个对象都具有xy属性:

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()在哪里?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-26 11:55
查看更多