d3 累积折线图

Question

我是 d3 图表的新手，我想创建 d3 累积折线图，日期在 x 轴上，y 轴上的一些值以及 x 和 y 轴的值应该出现在工具提示上。下面是我的示例代码和 sharing a screen shot for better understand my requirements:

[index.html 文件]

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

/*body { font: 12px Arial;}

path { `enter code here`
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}*/

</style>
<body>

<input type='button' onclick="Graph()" value='Generate Chart'>

<div id='chart' style="height:300px"><svg></svg>
</div>

</body>   

<link href="https://cdn.healthscion.com/Zureka/scripts/nv.d3.min.css" rel="stylesheet" />
<script src="https://cdn.healthscion.com/Zureka/scripts/d3.min.js"></script>
<script src="https://cdn.healthscion.com/Zureka/scripts/nv.d3.min.js"></script>
<script type="text/javascript">    

    var values = [
                                         [Date.parse("02/09/2016 12:46:45"), 150],
                                         [Date.parse("02/08/2016 12:46:45"), 50],
                                         [Date.parse("02/07/2016 12:46:45"), 130],
                                         [Date.parse("02/06/2016 12:46:45"), 100],
                                         [Date.parse("02/05/2016 12:46:45"), 80],
                                         [Date.parse("02/04/2016 12:46:45"), 50],
                                         [Date.parse("02/03/2016 12:46:45"), 120],
                                          [Date.parse("02/02/2016 12:46:45"), 90],
                                         [Date.parse("02/01/2016 12:46:45"), 110]

    ];


   var valuesfirst = [];
   var numericchartdata = [];

    valuesfirst.push(values);
    numericchartdata.push({
        'key': "Series 1", 'values': valuesfirst[0]
    });

    function Graph() {

        nv.addGraph(function () {
            var chart = nv.models.cumulativeLineChart()
                          .x(function (d) {

                              return d[0]
                          })
                          .y(function (d) {

                              return (d[1] * 100);

                          }) //adjusting, 100% is 1.00, not 100 as it is in the data
            //.color(d3.scale.category10().range())
            //.useInteractiveGuideline(false)
            ;
            //tickValues([1078030800000, 1122782400000, 1167541200000, 1251691200000])
            chart.xAxis.tickFormat(function (d) {

                return d3.time.format('%x')(new Date(d))
            });

            chart.yAxis.tickFormat(d3.format(',.1%'));

            d3.select("#chart" + ' svg').datum(numericchartdata).call(chart);

            //TODO: Figure out a good way to do this automatically
            nv.utils.windowResize(chart.update);

            return chart;
        });    
    }
</script>

Answer 1

我希望它能奏效。

 <!DOCTYPE html>
<html>
<head>
<link data-require="nvd3@1.1.14-beta" data-semver="1.1.14-beta" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.css" />
<script data-require="d3@3.3.11" data-semver="3.3.11" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
<script data-require="nvd3@1.1.14-beta" data-semver="1.1.14-beta" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.js"></script>
 <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<style>   

    .nv-point {
        stroke-opacity: 1 !important;
        stroke-width: 10px;
        fill-opacity: 1 !important;
    }
    .bullet { font: 10px sans-serif; }
.bullet .marker { stroke: #000; stroke-width: 2px; }
.bullet .tick line { stroke: #666; stroke-width: .5px; }
.bullet .range.s0 { fill: #eee; }
.bullet .range.s1 { fill: #ddd; }
.bullet .range.s2 { fill: #ccc; }
.bullet .measure.s0 { fill: steelblue; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: #999; }
</style>   
<body> <div id="chart" style="height:500px"> 
<svg height="600" width="600"></svg>  </div>   
<script>    
 var data1 = [
  {
  "key": "Blood Sugar Random",
  "values": [
   [1399787880000, 4900],
   [1418291820000, 5400],
   [1427251500000, 5200],
   [1447046040000, 4900],
   [1447669500000, 35300],
   [1448085600000, 6400],
   [1448504100000, 2800],
   [1450418400000, 5800],
   [1452229200000, 4800],
   [1454559095000, 5000],
   [1468195946000, 5400],
   [1481531373000, 5100]] }];    
      nv.addGraph(function () {

          var chart = nv.models.lineChart().interpolate('cardinal')

            .x(function (d) {
                return d[0];
            })
            .y(function (d) {
                return d[1]
            })  
            .color(d3.scale.category10().range())
            .transitionDuration(300)
            .showLegend(true)
            .showYAxis(true)
            .forceY([50, 500])
            .tooltipContent(
            function (key, x, y, e) {   

            return '<div id="tooltipcustom">' + '<p id="head">' + key + '</p>'
            + '<p>' + y + ' at ' + new Date(e.point[0]).getDate().toString() + '-' + (new Date(e.point[0]).getMonth() + 1).toString() +
                '-' + new Date(e.point[0]).getFullYear().toString() + ' ' + new Date(e.point[0]).getHours().toString() + ':' + new Date(e.point[0]).getMinutes().toString() +
                ':' + (new Date(e.point[0]).getSeconds().toString() == '0' ? '00' : new Date(e.point[0]).getSeconds().toString()) + '</p></div>'
            });



          chart.xAxis
            .tickValues([1078030800000, 1122782400000, 1167541200000, 1251691200000])
            .tickFormat(function (d) {



                return d3.time.format("%d-%Y %H:%M:%S")(new Date(d))

            });

          chart.yAxis
            .tickFormat(function (d) {



                return d3.format('.2f')(d)

            });

          d3.select('#chart svg')
            .datum(data1)
            .call(chart);

          nv.utils.windowResize(chart.update);

          return chart;

      }, function (chart) {


          x = chart;

          var x1 = chart.xScale()(1122782400000);
          var x2 = chart.xScale()(1251691200000);
          var height = chart.yAxis.range()[0];



          var y2 = chart.yScale()(80);
          var y1 = chart.yScale()(120);
          var width = chart.xAxis.range()[1];

          d3.select('.nv-wrap')
            .append('rect')
            .attr('y', y1)
            .attr('height', y2 - y1)
            .style('fill', '#2b8811')
            .style('opacity', 0.2)
            .attr('x', 0)
            .attr('width', width);

      });

d3 累积折线图

d3 Cumulative Line Chart

html

javascript

d3.js

cumulative-line-chart