在 d3.js 中将折线图绘制到画布上

Question

有没有人对 d3.js v3 有任何经验？

我试图在 html5 画布上通过 3 个点画线，而不是在 svg 中画线，但没有太大成功。我知道在 svg 中绘制图形的轴更容易。我需要绘制的点数简直让 DOM 不堪重负。

我在这里查看了 Canvas 并行图，但它对于我所需要的来说太复杂了。

  <div id="line"></div>?
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script type="text/javascript">

var margin = {top: 20, right: 20, bottom: 20, left: 40},
    w = 960 - margin.left - margin.right,
    h = 500 - margin.top - margin.bottom;

    var canvas = d3.select("#line").append("canvas")
      .attr("width", w + margin.left + margin.right)
      .attr("height", h + margin.top + margin.bottom)
      .node().getContext('2d');

    // using d3.canvas
    var data = d3.range(3).map(function(){return Math.random()*10})
    var line = d3.canvas.line();
    d3.select('canvas').call(line, data);

  </script>

我用它绘制了一条带有一些小的变化的线：

添加：

<script src="./d3-canvas/d3.canvas.0.1.0.js" charset="utf-8"></script>
var data = [[0, 0],  [10, 200]], line;
var margin = {top: 20, right: 20, bottom: 20, left: 40},
    w = 960 - margin.left - margin.right,
    h = 500 - margin.top - margin.bottom;

    var canvas = d3.select("#line").append("canvas")
      .attr("width", w + margin.left + margin.right)
      .attr("height", h + margin.top + margin.bottom);

    line = d3.canvas.line();
    d3.select('canvas').call(line, data);

然而，这与我链接到的样本似乎是不同的。

Answer 1

这是一个有点老的问题。但是没有人回答，我也有同样的问题。所以一旦我想通了，我决定在这里发帖。

bostock的例子在这里。但它使用的是早期的 alpha 版本 4。这是我使用当前版本 4 的简单示例。

const Width = 300;
const Height = 200;
const margin = {top: 20, right: 20, bottom: 30, left: 40};
const width = Width - margin.right - margin.left;
const height= Height - margin.top - margin.bottom;

const xScale = d3.scaleLinear().rangeRound([0, width]);
const yScale = d3.scaleLinear().rangeRound([height, 0]);
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(  yScale);

const canvas = d3.select("canvas").attr("width", Width).attr("height", Height);
const context = canvas.node().getContext('2d');
context.translate(margin.left, margin.top);

const line = d3.line()
    .x(d => xScale(d[0]))
    .y(d => yScale(d[1]))
    .context(context);

const data = [[0, 0],  [10, 200], [20, 100]];
const xExtent = d3.extent(data, d => d[0]);
const yExtent = d3.extent(data, d => d[1]);
xScale.domain(xExtent);
yScale.domain(yExtent);

context.clearRect(0, 0, width, height);
context.beginPath();
line(data);
context.lineWidth = 1;
context.opacity = 0.7;
context.strokeStyle = "steelblue";
context.stroke();
context.closePath();