使用基于 d3.js 的图表库

Question

我正在尝试使用基于 d3.js 的库 d3-timeseries 创建时间序列图。我正在使用作者在正文的 JSP 脚本标记中提到的实现，但我什么也没得到。感谢任何帮助。

我的代码：

    //data :

    // [{date:new Date('2013-01-01'),n:120,n3:200},...]

    var chart = d3.timeseries()
                  .addSeries(data,{x:'date',y:'n',diff:'n3'},
                    {interpolate:'monotone',color:"#333"}).width(900)


chart('#chart')

Answer 1

要使用这个库，您需要执行一些没有很好记录的步骤。

下载ZIP.
如果您还没有

bower

在此目录中执行bower install
Zip 将包含一个 src 文件夹，其中包含 d3_timeseries.js 和 d3_timeseries.css link 两者到您的 html 文件

示例 index.html 文件，如果在您解压缩库的文件夹中使用，它将起作用：

<html>
<head>
<script src="bower_components/d3/d3.min.js"></script>
<script src="src/d3_timeseries.js"></script>
<link href="src/d3_timeseries.css" rel="stylesheet" type="text/css">

</head>
<body>
    <div class="chart" id="chart3"></div>
</body>
    <script>

        var data = createRandomData(80,[0,1000],0.01)


        var chart3 = d3.timeseries()
                  .addSerie(data,{x:'date',y:'n',diff:'n3'},{interpolate:'monotone',color:"#333"})
                  .width(900)

        chart3('#chart3')



        function createRandomData(n,range,rand)
        {
        if(range==null)
        range=[0,100]
        if(rand==null)
        rand=1/20

        var num = range[0] + Math.floor(Math.random()*(range[1]-range[0]))
        var num2 = range[0] + Math.floor(Math.random()*(range[1]-range[0]))
        var num3 = num
        var d= new Date('2013-01-01')
        var data = []
        var rgen = d3.random.normal(0,(range[1]-range[0])*rand)
        for (var i = 0; i<n; i++)
        {

        data.push({date:d,n:num,n2:num2,n3:num3,
                ci_up:num3*1.05,ci_down:num3*0.95
        })
        d = new Date(d.getTime() + 1000*60*60*24)
        num = num+rgen()
        num3 = num+rgen()/3
        num = Math.min(Math.max(num,range[0]),range[1])
        num2 = num2+rgen()
        num2 = Math.min(Math.max(num2,range[0]),range[1])



        }
        return data;
        }

        </script>
</html>

使用基于 d3.js 的图表库

Using a d3.js based charting library

javascript

visualization

data-visualization

time-series

d3.js