d3.js - 如何使用 d3.js 绘制*简单*的线段？

Question

在 documentation对于 d3.js，我找不到在两点之间绘制简单线段的简单方法。我能在那里找到的唯一方法是需要为 x 和 y 等创建回调。即一个主要的制作只是为了画一个简单的线段。

有没有更简单的？

Answer 1

最简单的是:

d3.select('svg')
  .append('path')
  .attr({
    d: "M0,0L200,200"
    stroke: '#000'
  });

这还不错:

var simpleLine = d3.svg.line()
d3.select('svg')
  .append('path')
  .attr({
    d: simpleLine([[0,0],[200,200]]),
    stroke: '#000'
  });

仍然....
我不知道这是否更简单，但它可能更直接:

d3.select('svg')
  .append('line')
  .attr({
    x1: 0,
    y1: 0,
    x2: 200,
    y2: 200,
    stroke: '#000'
  })

(所有三个示例都绘制了一条从 0,0 到 200,200 的线)