是否可以使用 d3 并像 vis.js 一样创建 line/curve？

Question

我正在使用 d3 创建带有圆圈和线条的网络图。使用d3时，线条是直的，我想知道是否可以实现更多的柔性线，例如vis.js，添加图片进行演示：

d3:

Vis.js:

Answer 1

d3 可以进行各种可视化。你问的是线插值。开箱即用 d3 支持

线性
列表项
前一步
步进
基础
基础开放
基础平仓
捆绑包
红衣主教
红衣主教开放
红衣主教关闭
单调

有两个插值比较链接 - https://bl.ocks.org/emmasaunders/f7178ed715a601c5b2c458a2c7093f78 - https://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529

这些插值可以从框中获得，但不限于此。您可以在 d3 上编写自己的插值， f.e。 https://bl.ocks.org/mbostock/3310323

添加了代码片段。或者你可以使用 d3.svg.diagonal()

let curveData = [{ x: 190, y: 100 }, { x: 269, y: 50 }, { x: 360, y: 150 }];
let edge = d3.select('svg').append('g').attr('class', 'g1');
let edge2 = d3.select('svg').append('g').attr('class', 'g2');

var line11 = d3.svg.line()
  .x(function(d) { return (d.x ) })
  .y(function(d) { return (d.y ) })
  .interpolate('cardinal');

let diagonal = d3.svg.diagonal()
 .source(function (d) { return { x: d[0].y, y: d[0].x }; })            
 .target(function (d) { return { x: d[d.length - 1].y, y: d[d.length - 1].x }; })
 .projection(function (d) { return [d.y, d.x]; });
   
d3.select('.g1')
  .datum(curveData)
  .append('path')
  .attr('class', 'link')
  .attr('d', diagonal)
  .attr('stroke', 'red')
  .attr('stroke-width', 3)
  .attr('fill', 'none');

d3.select('.g2')
  .datum(curveData)
  .append('path')
  .attr('class', 'link')
  .attr('d', line11)
  .attr('stroke', 'blue')
  .attr('stroke-width', 2)
  .attr('fill', 'none');

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>
  </head>
  <body>
    <svg width=500 height=500></svg>
  </body>
</html>

是否可以使用 d3 并像 vis.js 一样创建 line/curve？

Is it possible to use d3 and create line/curve like vis.js?

javascript

d3.js

vis.js