代碼遷移線圖到V4

Question

我是很新的D3很抱歉，如果這是顯而易見的，但我從遷移V3 d3.js到V4折線圖和正在錯誤：

TypeError: Cannot read property '0' of undefined

我看以前問問題，他們說，路[0] [0]是OK，而不是使用path.node（）

此代碼是引發錯誤

var totalLength = [path[0][0].getTotalLength() , path[0].getTotalLength()] ; 
console.log(totalLength); 

部分

以下是整個代碼但我認爲這個問題是與日期格式我在一開始選擇做：

var margin = {top: 20, right: 50, bottom: 100, left: 500}, 
    width = 1000 //- margin.left - margin.right, 
    height = 400 - margin.top - margin.bottom; 

var parseDate = d3.time.format("%Y-%m-%d").parse; 
/* var parseDate = d3.time.format("%d-%b-%y").parse; */ 

var x = d3.time.scale() 
    .range([0, width]); 

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

var color = d3.scale.category10(); 

var xAxis = d3.svg.axis() 
    .scale(x) 
// .ticks(8) 
    .innerTickSize(2) 
    .outerTickSize(2) 
    .orient("bottom") 
    .tickFormat(d3.time.format("%b")); // tickFormat 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .tickFormat(function(d) { return d ;}) 
    .ticks(5) 
    .innerTickSize(5) 
    .outerTickSize(2) 
    .orient("left"); 

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.accdnt); }); 


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

d3.tsv("data.tsv", function(error, data) { 
    color.domain(d3.keys(data[2]).filter(function(key) { return key !== "date"; })); 

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

    var year = color.domain().map(function(name) { 
    return { 
     name: name, 
     values: data.map(function(d) { 
     return {date: d.date, accdnt: +d[name]}; 
     }) 
    }; 
    }); 


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

    y.domain([ 
      0,d3.max(year, function(c) { return d3.max(c.values, function(v) { return v.accdnt; }); }) 
     ]); 

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

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 


    svg.append("line") 
     .attr(
     { 
      "class":"horizontalGrid", 
      "x1" : 0, 
      "x2" : width, 
      "y1" : y(0), 
      "y2" : y(0), 
      "fill" : "none", 
      "shape-rendering" : "crispEdges", 
      "stroke" : "black", 
      "stroke-width" : "1px", 
      "stroke-dasharray": ("3, 3") 
     }); 

    var company = svg.selectAll(".company") 
     .data(year) 
    .enter().append("g") 
     .attr("class", "company"); 



    var path = svg.selectAll(".company").append("path") 
     .attr("class", "line") 
     .attr("d", function(d) { return line(d.values); }) 
     .style("stroke", function(d) { if (d.name == "2013") 
             {return "rgb(000,255,000)"} 
            if (d.name == "2014") 
             {return "rgb(045,255,251)"} 
            if (d.name == "2015") 
             {return "rgb(128,125,044)"} 
             else {return "#000";} 
             }); 




var totalLength = [path[0][0].getTotalLength(), path[0][1].getTotalLength()]; 

console.log(totalLength); 


    d3.select(path[0][0]) 
     .attr("stroke-dasharray", totalLength[0] + " " + totalLength[0]) 
     .attr("stroke-dashoffset", totalLength[0]) 
     .transition() 
     .duration(2500) 
     .ease("linear") 
     .attr("stroke-dashoffset", 0); 

    d3.select(path[0][1]) 
     .attr("stroke-dasharray", totalLength[1] + " " + totalLength[1]) 
     .attr("stroke-dashoffset", totalLength[1]) 
     .transition() 
     .duration(2500) 
     .ease("linear") 
     .attr("stroke-dashoffset", 0); 

    d3.select(path[0][2]) 
     .attr("stroke-dasharray", totalLength[1] + " " + totalLength[1]) 
     .attr("stroke-dashoffset", totalLength[1]) 
     .transition() 
     .duration(2500) 
     .ease("linear") 
     .attr("stroke-dashoffset", 0); 

}); 

Answer 1

嘗試尋找路徑的值[0] [0]的console.log（路徑）

Answer 2

如果您嘗試引用D3 v4.x，的代碼，幾個零件將引發錯誤，而不僅僅是您提到的錯誤。這些都是錯誤的：

• d3.time.format
• d3.time.scale（）
• d3.scale.linear（）
• d3.scale.category10（）
• D3。 svg.axis（）
• d3.svg.line（）
• line.interpolate

例plaining剛纔你提到的部分（「這是引發錯誤的代碼的一部分」）：

據D3 4.x的API，

Selections no longer subclass Array using prototype chain injection; they are now plain objects, improving performance.

所以，在D3版本4。 x，選擇是對象。這就是爲什麼path[0][0]不再工作。

如果CONSOLE.LOG您的選擇，你會看到這樣的內容：

Selection {_groups: Array[1], _parents: Array[1]} 

因此，你必須使用path.nodes()代替。