d3 3.0から4.0 x軸への変換が表示されない

私はここに回答を含めて全部検索しましたが、私の特定の問題を解決するものは見つけられません。d3 3.0から4.0 x軸への変換が表示されない

私はD3を学習していますが、ほとんどのチュートリアルは3.x用です。私は最新のバージョンを使用することを好むので、私が見つけた作業用の3.xチュートリアルをとり、それを4.xに変換しようとしました。 Y軸は表示されますが、X軸の目盛り、X軸のラベル、およびグラフのデータ線は表示されません。私はちょうどいくつかの関数名を変更する必要があったように見えましたが、私は何かを見逃しているに違いありません。未処理の例外がある場合に備えて、私はtry/catchを持っていますが、何もキャッチしません。私はChromeでコードをステップ実行しようとしましたが、明らかなことは何も表示されません。

ここにコードがあります。誰にもアイデアはありますか？

<html> 
<head><title>D3 test</title></head> 

<body> 

<div class="jumbotron"> 
    <h1>Charting </h1> 
    <p class="lead">Charting with D3</p> 
</div> 

<div class="row"> 
    <style> 
     .row div { 
      font: 10px sans-serif; 
     } 

     .axis path, 
     .axis line { 
      fill: none; 
      stroke: #000; 
      shape-rendering: crispEdges; 
     } 

     .line { 
      fill: none; 
      stroke: steelblue; 
      stroke-width: 1.5px; 
     } 
    </style> 
     <script src="http://d3js.org/d3.v4.min.js"></script> 
     <script> 
      Date.prototype.addHours = function(h) {  
       this.setTime(this.getTime() + (h*60*60*1000)); 
       return this; 
      } 

      var parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%S"); 

      function generateData() 
      { 
       try 
       { 
        var startDate = parseDate("2016-07-15T00:00:00"); 
        var currentDate = startDate; 
        var data = new Array(61); 
        for (var index = 0; index < data.length; ++index) 
        { 
         data[index] = { date: currentDate, close: Math.random() * 100 }; 
         currentDate = currentDate.addHours(1); 
        } 

        return data; 
       } 
       catch (ex) 
       { 
        ex = ex; 
       } 
      } 

      try{ 
       var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
        width = 960 - margin.left - margin.right, 
        height = 500 - margin.top - margin.bottom; 

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

       var xAxis = d3.axisBottom(x); 
       var yAxis = d3.axisLeft(y); 

       var line = d3.line() 
        .x(function(d) { return x(d.date); }) 
        .y(function(d) { return y(d.close); }); 

       var svg = d3.select("body").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 + ")"); 

       var data = generateData(); 

       x.domain(d3.extent(data, function(d) { return d.date; })); 
       y.domain(d3.extent(data, function(d) { return d.close; })); 

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

       svg.append("g") 
        .attr("class", "y axis") 
        .call(yAxis) 
        .append("text") 
        .attr("transform", "rotate(-90)") 
        .attr("y", 6) 
        .attr("dy", ".71em") 
        .style("text-anchor", "end") 
        .text("Price ($)"); 

       svg.append("path") 
        .datum(data) 
        .attr("class", "line") 
        .attr("d", line); 
      } 
      catch (ex) 
      { 
       ex = ex; 
      } 
     </script> 
</div> 

</body> 
</html>

出典

2016-07-15 TheCodeFiend

ここでの問題は、D3のバージョン（3.xまたは4.xの）ではありませんが、あなたのgenerateData機能は：すべてのオブジェクトは、同じ日付（最後の）を持っています。

私はこれに関数を変更：

function generateData(){ 
       var startDate = parseDate("2016-07-15T00:00:00"); 
       var currentDate = startDate; 
       var data = new Array(61); 
       for (var index = 0; index < data.length; ++index) 
       { 
        data[index] = { date: currentDate.toString(), close: Math.random() * 100 }; 
        currentDate.addHours(1); 
       } 
       return data; 
      };

をその後、私は戻って日付に文字列を変換する：ここで

data.forEach(function(d){ 
    d.date = Date.parse(d.date); 
});

はフィドルは次のとおりです。https://jsfiddle.net/gerardofurtado/yngdyqdr/1/

PS：あなたのコードにaddHoursはありません。私はこれを使いました：

Date.prototype.addHours = function(h) {  
    this.setTime(this.getTime() + (h*60*60*1000)); 
    return this; 
};

出典

2016-07-15 17:22:24

ありがとう！私のaddHoursコード（スクリプトタグの一番上にあります）は実際にあなたのものとしてインスタンスを変更していたので、私のデータはすべて同じx値でした。 – TheCodeFiend

ああ、はい、そこにあります！ –

d3 3.0から4.0 x軸への変換が表示されない

答えて

関連する問題