d3.jsで.csvデータ形式を使用する折れ線

Question

Open、High、Low、Close、Volumeのような株データの折れ線グラフを作成しようとしていますが、折れ線グラフでこれらのデータを渡そうとしています正しいグラフを表示すると、日付のみが表示され、閉じることができます。しかし、私はOpen High Low CloseとLine Chartの音量を渡したいと思います。 もう少し多くのデータを渡したいだけです。

<script src="https://d3js.org/d3.v4.min.js"></script> 
    <script> 
     // set the dimensions and margins of the graph 
     var margin = { top: 20, right: 20, bottom: 30, left: 50 }, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

     // Parse the date/time 
     var parseDate = d3.timeParse("%d-%b-%y"); 

     // Set the ranges 
     var x = d3.scaleTime().range([0, width]); 
     var y = d3.scaleLinear().range([height, 0]); 

     // Define the axes 
     var xAxis = d3.axisBottom().scale(x) 
     .tickSizeInner(-height) 
    .tickSizeOuter(0) 
    .tickPadding(10); 

     var yAxis = d3.axisLeft().scale(y) 
     .tickSizeInner(-width) 
    .tickSizeOuter(0) 
    .tickPadding(10); 

     var zAxis = d3.axisRight(y); 

     // Define the line 
     var valueline = d3.line() 
      .x(function (d) { return x(d.Date); }) 
      .y(function (d) { return y(d.Close); }); 

     // Adds the svg canvas 
     var svg = d3.select("#DivChartShow") 
      .append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
       .attr("transform", 
         "translate(" + margin.left + "," + margin.top + ")"); 

     // Get the data 
     d3.csv("/Content/data2.csv", function (error, data) { 
      // for filter data by days 
      if (days != undefined) { 
       var today = new Date(); 
       today.setDate(today.getDate() - days); 

       var dd = today.getDate(); 
       var mm = today.getMonth() + 1; 
       var yyyy = today.getFullYear(); 

       if (dd < 10) { 
        dd = '0' + dd; 
       } 
       if (mm < 10) { 
        mm = '0' + mm; 
       } 
       var today = mm + '/' + dd + '/' + yyyy; 

       var cutoffDate = moment(today).format('DD-MMM-YY'); 

       data = data.filter(function (i) { 
        return parseDate(i.Date) > parseDate(cutoffDate); 
       }); 
      } 

      data.forEach(function (d) { 
       d.Date = parseDate(d.Date); 
       d.Open = +d.Open; 
       d.High = +d.High; 
       d.Low = +d.Low; 
       d.Close = +d.Close; 
      }); 

      // Scale the range of the data 
      x.domain(d3.extent(data, function (d) { return d.Date; })); 
      y.domain([0, d3.max(data, function (d) { return d.Close; })]); 

      svg.append("path") 
       .attr("class", "line") 
       .attr("d", valueline(data)); 

      // Add the X Axis 
      svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis); 

      // Add the Y Axis 
      if (clStatus == true) { 
       svg.append("g") 
        .attr("class", "y axis") 
        .call(yAxis); 
      } 
      if (crStatus == true) { 
       svg.append("g") 
        .attr("class", "z axis") 
        .attr("transform", "translate(" + width + " ,0)") 
        .call(yAxis); 
      } 
     }); 


    </script> 

Answer 1

私はコメントとしてはあまりにも多いので、答えとして投稿するだけです。あなたのコードから：

var valueline = d3.line() .x(function (d) { return x(d.Date); }) .y(function (d) { return y(d.Close); });

この線は、Y軸のみにd.Closeを描画します。いずれか：各プロパティ（d.Open、d.Highなど）に複数の行関数を書き込むか、プロパティでデータをネストし、何らかの種類のカラースケールでforEach()を使用して線を描画します。私は、すべてのプロパティが同じ値（ドル）を使用する場合、このバージョンが実行可能であると考えています：https://bl.ocks.org/mbostock/3884955