如何用d3.js绘制一个*简单的线段？ [英] How to draw a *simple* line segment with d3.js?

问题描述

在d3.js的文档中找不到在两点之间绘制简单线段的简单方法。我可以找到的唯一方法是这样做是需要创建回调的x和y等等。

有更简单的东西吗？

解决方案

最简单的是：

  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'
}）
  

到200,200）

In the documentation for d3.js I cannot find a straightforward way to draw a simple line segment between two points. The only way I can find there to do this is one that requires creating callbacks for x and y, etc., etc. I.e. a major production just to draw a simple line segment.

Is there something simpler?

解决方案

Simplest is:

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

This is not too bad:

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

Still....

Dunno if this is simpler, but it's maybe more direct:

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

(All three examples draw a line from 0,0 to 200,200)

这篇关于如何用d3.js绘制一个*简单的线段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！