Question

我从github https://github.com/mcaule/d3-timeseries下载了这个项目，但是我不知道如何运行这个项目来显示d3图。此站点中有一些示例：http://mcaule.github.io/d3-timeseries/。例如，我当时正在考虑编写一个html页面来运行该项目，但我不知道如何。

Answer 1

适合您的原型-

<!DOCTYPE html>
<html lang="en-us">
<head>
    <link rel="stylesheet" type="text/css" href="https://mcaule.github.io/d3-timeseries/dist/d3_timeseries.min.css">
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
    <script src="https://mcaule.github.io/d3-timeseries/dist/d3_timeseries.min.js"></script>
    <script src="https://mcaule.github.io/d3-timeseries/dist/create-example-data.js"></script>
    <section class="main-content">
        <h3>
            Difference
        </h3>

        <!-- <div class="chartContainer"> -->
            <!-- <p class="codepen" data-default-tab="result" data-embed-version="2" data-height="500" data-pen-title="d3-timeseries Example 1" data-slug-hash="wPpJWr" data-theme-id="dark" data-user="mcaule"> -->
            <div id="chart"></div>
            <!-- </p> -->
            <script>
                var data = createRandomData(80,[0,1000],0.01)
                // [{date:new Date('2013-01-01'),n:120,n3:200,ci_up:127,ci_down:115},...]
                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(820)

                chart('#chart')
            </script>
        <!-- </div> -->
    </section>
</body>

按原样复制并粘贴到.html文件中，然后在浏览器中打开该文件，一切都会正常进行，如果没有，请告诉我。

D3 JS：创建页面index.html以运行js项目

1 个答案: