D3.js - Fehler: d3.line() ist keine Funktion (von Version 4 auf 3 geändert)

Question

Ich habe das folgende Segment in meinem D3-Code.

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

und es sagt d3.line() keine Funktion ist. Ich schrieb ursprünglich den Code in Version 4. Dann änderte es wieder auf Version 3.

Ich habe meinen Code unten eingefügt.

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); 

Kann jemand bitte alle Änderungen weisen darauf hin, dass 3 nach getan werden muss Version?

Answer 1

Wie von @Cyril d3.line() hingewiesen wird, ist keine Funktion, sondern Sie müssen d3.svg.line() verwenden. Siehe auch here für mehr Erklärung.

Refs: docs