D3 JS：创建一个页面index.html来运行js项目

55ooxyrt 于 11个月前发布在其他

关注(0)|答案(2)|浏览(114)

我从github https://github.com/mcaule/d3-timeseries下载了这个项目，但是我不知道如何运行这个项目来显示d3图。在这个网站上有例子：http://mcaule.github.io/d3-timeseries/。例如，我想写一个html页面来运行这个项目，但是我不知道怎么做。

d3.js

来源：https://stackoverflow.com/questions/51386970/d3-js-create-a-page-index-html-to-run-the-js-project

2条答案

按热度按时间

t8e9dugd1#

为你准备了一个工作原型-

<!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文件，然后打开该文件在浏览器中，一切都将工作得很好，如果不是那么请让我知道。

赞(0）回复(0）举报 11个月前

6rvt4ljy2#

如果有人需要将此图添加到React，您可以执行以下操作。
1.在idex.html文件中，导入必要的文件

...
<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>
</body>

字符串
1.然后，创建React组件

import * as d3 from 'd3'
import React from "react";

var frenchLocale = d3.timeFormatLocale({
    "dateTime": "%a %e %b %Y %X",
    "date": "%d-%m-%Y",
    "time": "%Hh%M",
    "periods": ["am", "pm"],
    "days": ["Dimanche","Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
    "shortDays": ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
    "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aôut", "Septembre", "Octobre", "Novembre", "Décembre"],
    "shortMonths": ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Aôut", "Sep", "Oct", "Nov", "Déc"]
  })
  
var frenchTimeFormat = function(date){
return (
    d3.timeDay(date) < date ? frenchLocale.format("%Hh") :
    d3.timeMonth(date) < date ? frenchLocale.format("%d/%m") :
    d3.timeYear(date) < date ? frenchLocale.format("%B") :
    d3.timeFormat("%Y")
)(date)
}
// this function can also import as above, in the index.html file, if you do not need to edit it.
function createRandomData(n, range, rand) {
    if (range == null) range = [0, 100];
    if (rand == null) rand = 1 / 200;
  
    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.randomNormal(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;
  }
var data = createRandomData(600,[1000,1000000])

class TimeSeriesChart extends React.Component {
  constructor(props){
    super(props);
  }
 
  componentDidMount(){
    var chart = window.d3_timeseries()
    .addSerie(data,{x:'date',y:'n'}, {interpolate:'step-before'})
    .addSerie(null,{x:'date',y:'n2'}, {interpolate:'linear'})
    .xscale.tickFormat(frenchTimeFormat)
    .margin.left(70)
    .width(800);
    console.log(typeof chart)
    chart('#ts-chart-id')
  }
  render(){
    return (
      <div id={'ts-chart-id'}></div>
    );
 }
 
}
export default TimeSeriesChart;

型
1.然后在您要添加的位置添加“TimeSeriesChart”组件。例如：

...
import TimeSeriesChart from 'path/to/above/file'
...
return (
...
    <TimeSeriesChart/>
...
);
...

型
我也是新的React。所以可能有术语问题（但代码的工作）。无论如何，真诚地希望这将希望有人保存时间，他/她不必经历我去的麻烦。
干杯

赞(0）回复(0）举报 11个月前

我来回答

D3 JS：创建一个页面index.html来运行js项目

2条答案

相关问题

热门标签

最新问答