2017-07-20 4 views
0

私のD3コードには次のセグメントがあります。D3.js - エラー:d3.line()が関数ではありません(バージョン4から3に変更)

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

d3.line()は機能ではありません。 私は最初にバージョン4でコードを書いた。そして再びバージョン3に変更した。

私は以下のコードを貼り付けた。

var data = [{ "date": "2016.07.19", "close": 185697.89 }, { "date": "2016.07.20", "close": 185697.89 }, { "date": "2016.07.21", "close": 186601.1 }, { "date": "2016.07.22", "close": 187273.89 }]; 

      var svg = d3.select("svg"), 
      margin = { 
       top: 20, 
       right: 20, 
       bottom: 30, 
       left: 50 
      }, 
      width = +svg.attr("width") - margin.left - margin.right, 
      height = +svg.attr("height") - margin.top - margin.bottom, 
      g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      var parseTime = d3.time.format("%Y.%m.%d"); 

      var x = d3.scale.linear() 
      .rangeRound([0, width]); 

      var y = d3.scale.linear() 
      .rangeRound([height, 0]); 

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

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

      g.append("g") 
      .attr("transform", "translate(0," + height + ")") 
      .call(d3.axisBottom(x)) 
      .select(".domain") 
      .remove(); 

      g.append("g") 
      .call(d3.axisLeft(y)) 
      .append("text") 
      .attr("fill", "#000") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", "0.71em") 
      .attr("text-anchor", "end") 
      .text("Price ($)"); 

      g.append("path") 
      .datum(data) 
      .attr("fill", "none") 
      .attr("stroke", "steelblue") 
      .attr("stroke-linejoin", "round") 
      .attr("stroke-linecap", "round") 
      .attr("stroke-width", 1.5) 
      .attr("d", line); 

誰かがバージョン3に従って行う必要がある変更を指摘できますか?

+0

の代わりに、d3.line()それは私が変更さv3の – Cyril

+0

で 'd3.svg.line()'でなければなりません。次に、getFullYear()は関数ではないと言います。私は自分のコードにそのようなメソッドを持っていません – Nishi

答えて

0

@Cyrilで指摘されているようにd3.line()は機能ではなく、代わりにd3.svg.line()を使用する必要があります。さらに詳しい説明はhereをご覧ください。

参考文献:docs

+0

私は変更されました。次に、getFullYear()は関数ではないと言います。私は自分のコードにそのようなメソッドを持っていません。 – Nishi

+0

@Nishi look [here](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#_format )。 parseTimeではなくformatを使用することができます –

関連する問題