Warum verwenden Sie den Schlüsselfilter anstelle von columns.slice()?

Question

Warum ist der Autor

mit

d3.keys(cars[0]).filter... 

statt

cars.columns.slice(1) 

verwenden ..? Die Scheibe gibt im Grunde die gleiche Information zurück, ohne irgendeine Logik darunter durchführen zu müssen.

var x = d3.scale.ordinal().rangePoints([0, width], 1), 
    y = {}; 

    // Extract the list of dimensions and create a scale for each. 
    x.domain(dimensions = d3.keys(cars[0]).filter(function(d) { 
    return d != "name" && (y[d] = d3.scale.linear() 
     .domain(d3.extent(cars, function(p) { return +p[d]; })) 
     .range([height, 0])); 
    })); 

Daten hierfür ist

name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year 
AMC Ambassador Brougham,13,8,360,175,3821,11,73 
AMC Ambassador DPL,15,8,390,190,3850,8.5,70 
AMC Ambassador SST,17,8,304,150,3672,11.5,72 

Quelle: https://bl.ocks.org/mbostock/1341021

Answer 1

Der Autor dieses Codes ist der Schöpfer der D3. Natürlich würde er wahrscheinlich den zweiten Ausschnitt bevorzugen. Dieser Code verwendet jedoch D3 v3.x und es gibt keine columns -Eigenschaft im Datenarray in dieser Version von D3.

Sehen wir dies in den folgenden Schnipsel.

Zuerst mit D3 v3.x:

var data = d3.csv.parse(d3.select("#csv").text()); 
 

 
console.log("using d3.keys: " + d3.keys(data[0])); 
 
console.log("using data.columns: " + data.columns);

pre{ 
 
    display: none; 
 
}

<script src="https://d3js.org/d3.v3.min.js"></script> 
 
<pre id="csv">name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year 
 
AMC Ambassador Brougham,13,8,360,175,3821,11,73 
 
AMC Ambassador DPL,15,8,390,190,3850,8.5,70 
 
AMC Ambassador SST,17,8,304,150,3672,11.5,72</pre>

können Sie sehen, dass d3.keys(data[0]) Werke, während data.columns kehrt undefiniert.

mit Jetzt D3 v4.x:

var data = d3.csvParse(d3.select("#csv").text()); 
 

 
console.log("using d3.keys: " + d3.keys(data[0])); 
 
console.log("using data.columns: " + data.columns);

pre{ 
 
    display: none; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<pre id="csv">name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year 
 
AMC Ambassador Brougham,13,8,360,175,3821,11,73 
 
AMC Ambassador DPL,15,8,390,190,3850,8.5,70 
 
AMC Ambassador SST,17,8,304,150,3672,11.5,72</pre>

Beide d3.keys(data[0]) und data.columns Arbeit, und Sie das gleiche Ergebnis.