是否可以像vis.js一样使用d3和创建线型曲线？

问题描述 投票：1回答：1

我在用d3创建网络图的圆&线，在使用d3的时候，线是直的，我想知道是否可以像vis.js一样实现更多的柔性线，添加图片进行演示。

d3:enter image description here

Vis.js。

enter image description here

javascript d3.js vis.js
1个回答
1
投票

d3可以做到所有类型的可视化。你要问的是它是线插值.开箱即用的d3支持的是

  • 线性
  • 列表项目
  • 踏前
  • 继而
  • 基础
  • 础
  • 封闭
  • 捆绑
  • 枢机
  • 枢机-开放
  • 枢密
  • 单调

有两个环节与插值比较--。https:/bl.ocks.orgemmasaundersf7178ed715a601c5b2c458a2c7093f78。- https:/bl.ocks.orgd3noobced1b9b18bd8192d2c898884033b5529。

这些插值可从盒子中获得，但不限于此。你可以写你自己的插值在d3，f.e。https:/bl.ocks.orgmbostock3310323。

已经添加了代码的片段。或者你可以使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.