Html 在画布上绘制d3.js中的线图

有没有人有过使用d3.js v3的经验

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

我看过画布上的平行图，但它太复杂了，无法满足我的需要

  <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>

我让它画了一条线，做了一些小改动：

加：

---

然而，这与我链接到的样本的处理方式不同

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

下面就是一个例子。但它使用的是早期的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();

---

这是个老问题。但是没有人回答，我也有同样的问题。所以一旦我弄明白了，我决定在这里发布

下面就是一个例子。但它使用的是早期的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();

---

d3.canvas.line不是本机d3函数，似乎是由第三方github提供的。你是在d3之外加载那个库吗？不，事实上我不是，这是用这种形式写的问题的一部分。从链接画布平行坐标中，我看到蓝色线条是通过使用ctx.stroke.d3绘制的。Canvas.line不是本机d3函数，似乎是由第三方github提供的。你是在d3之外加载那个库吗？不，事实上我不是，这是用这种形式写的问题的一部分。从链接画布的平行坐标中，我看到蓝色线是通过使用ctx.stroke绘制的。