d3 누적 선 차트

d3 차트를 처음 사용하여 x 축에 날짜, y 축에 일부 값, x 축에 y 축 값이 툴팁에 표시되는 d3 누적 선형 차트를 만들고 싶습니다. 나는 그것이 작동합니다 희망d3 누적 선 차트

[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>

출처

2016-10-25 4605786

가, 나에게 잘 보이는 문제가 무엇입니까? – maxymoo

데이터를 누적 합계로 변환하는 방법을 묻고 있습니까? 이 경우 http://stackoverflow.com/questions/20477177/creating-an-array-of-cumating-sum-in-javascript – maxymoo

안녕하세요 @maxymoo 스크린 샷을 공유하고 있습니다. 요구 사항을 참조하십시오. – 4605786

: 여기 아래에있는 내 샘플 코드 및 sharing a screen shot for better understand my requirements입니다.

<!DOCTYPE html> 
<html> 
<head> 
<link data-require="[email protected]" 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="[email protected]" data-semver="3.3.11" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script> 
<script data-require="[email protected]" 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); 

     });

출처

2016-12-02 10:13:38

d3 누적 선 차트

답변

관련 문제