在 d3-plunker 上渲染 d3-timeseries

Question

我需要使用 link 上给出的 d3 时间序列图： http://mcaule.github.io/d3-timeseries/

我有一些 JSON 数据，我将使用这些数据绘制此图。我正在尝试在 d3 plunker 上进行这项工作。

作为 D3 和 plunker 的新手，我不确定我是否在正确的地方编写代码，因为什么都没有发生。请指导我。

我尝试在 d3-plunker 上使用的代码：

<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var data : [{date:new Date('2013-01-01'),n:120,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-02'),n:121,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-03'),n:122,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-04'),n:123,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-05'),n:124,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-06'),n:125,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-07'),n:126,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-08'),n:127,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-09'),n:128,n3:124,ci_up:130,ci_down:118},
            {date:new Date('2013-01-10'),n:129,n3:124,ci_up:130,ci_down:118}]
var chart = d3.timeseries()
          .addSerie(data.slice(0,60),{x:'date',y:'n'},{interpolate:'linear',color:"#a6cee3",label:"value"})
          .addSerie(data.slice(50),
              {x:'date',y:'n3',ci_up:'ci_up',ci_down:'ci_down'},
              {interpolate:'monotone',dashed:true,color:"#a6cee3",label:"prediction"})
          .width(900)

</script>

Answer 1

首先你要参考d3-timeseries:

<script src="https://mcaule.github.io/d3-timeseries/src/d3_timeseries.js"></script>

在那之后，在你的代码的最后，你必须调用它：

chart("body")

最后，请记住这不是有效的 JavaScript:

var data : [];

应该是var data = []。

这是您的工作代码（点击"run code snippet"）：

var data = [{
  date: new Date('2013-01-01'),
  n: 120,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-02'),
  n: 121,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-03'),
  n: 122,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-04'),
  n: 123,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-05'),
  n: 124,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-06'),
  n: 125,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-07'),
  n: 126,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-08'),
  n: 127,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-09'),
  n: 128,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}, {
  date: new Date('2013-01-10'),
  n: 129,
  n3: 124,
  ci_up: 130,
  ci_down: 118
}]
var chart = d3.timeseries()
  .addSerie(data.slice(0, 60), {
    x: 'date',
    y: 'n'
  }, {
    interpolate: 'linear',
    color: "#a6cee3",
    label: "value"
  })
  .addSerie(data.slice(50), {
    x: 'date',
    y: 'n3',
    ci_up: 'ci_up',
    ci_down: 'ci_down'
  }, {
    interpolate: 'monotone',
    dashed: true,
    color: "#a6cee3",
    label: "prediction"
  })
  .width(900)

chart("body")

.axis line, .axis path {
  fill: none;
  stroke: black;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://mcaule.github.io/d3-timeseries/src/d3_timeseries.js"></script>

在 d3-plunker 上渲染 d3-timeseries

rendering d3-timeseries on d3-plunker

javascript

d3.js

plunker