个人中心
gpt4 book ai didi

javascript - 在 d3-plunker 上渲染 d3-timeseries

转载 作者：行者123 更新时间：2023-11-28 04:30:21 26 4
gpt4 key购买 nike

我需要使用链接上给出的 d3-timeseries 图: 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>

最佳答案

首先，您必须引用 d3-timeseries:

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

之后，在代码末尾，您必须调用它:

chart("body")

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

var data : [];

应该是var data = []。

这是您的工作代码(单击“运行代码片段”):

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>

关于javascript - 在 d3-plunker 上渲染 d3-timeseries，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44664010/

26 4 0
文章推荐： Javascript 对象有一个有两个值的属性
文章推荐： javascript - html() 中的 jQuery 编码
文章推荐： javascript - React-tooltip 自定义类正在删除克拉
文章推荐： javascript - 如何在JqGrid中动态绑定(bind)行和列？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com