d3.js Diagramm wird nicht angezeigt mit tsv-Datei

Question

Ich bin ein d3js noobie also bitte mit mir ertragen. Ich folge Mike Bostocks step-by-step tutorial zum Erstellen eines Balkendiagramms mit externen Datendateien. Ich verwende das Dateiformat tsv, das ich erstellt habe, indem ich Daten in Excel eingegeben habe, und es als eine txt Akte gespeichert habe, die dann die Erweiterung zu tsv umbenennt. Ich richte dann einen lokalen Webserver mit python -m SimpleHTTPServer per this SO answer

Während alle Dateien in der Verzeichnisliste angezeigt werden, ist das Balkendiagramm immer noch nicht vorhanden. In meiner Konsole werden keine Fehler angezeigt. Ich frage mich, ob es ein Problem damit ist, wie die Werte in meiner tsv-Datei getrennt sind, obwohl es das gleiche wie das Beispiel erscheint. Ich würde jede Hilfe sehr schätzen, da ich gerne mit d3js anfangen möchte.

Edit: Ich bin nicht sicher, ob dies relevant ist, aber die Dateien auf lokalen Server unter der Adresse erscheinen: http://0.0.0.0:8000/

Hier ist die js (direkt aus dem Tutorial kopiert):

.chart rect { 
    fill: steelblue; 
} 

.chart text { 
    fill: white; 
    font: 10px sans-serif; 
    text-anchor: end; 
} 

</style> 
<svg class="chart"></svg> 
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"> 
<script> 

var width = 420, 
    barHeight = 20; 

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

var chart = d3.select(".chart") 
    .attr("width", width); 

d3.tsv("data2.tsv", type, function(error, data) { 
    x.domain([0, d3.max(data, function(d) { return d.value; })]); 

    chart.attr("height", barHeight * data.length); 

    var bar = chart.selectAll("g") 
     .data(data) 
    .enter().append("g") 
     .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 

    bar.append("rect") 
     .attr("width", function(d) { return x(d.value); }) 
     .attr("height", barHeight - 1); 
d 
    bar.append("text") 
     .attr("x", function(d) { return x(d.value) - 3; }) 
     .attr("y", barHeight/2) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.value; }); 
}); 

function type(d) { 
    d.value = +d.value; // coerce to number 
    return d; 
} 

</script> 

und die tsv-Datei:

name value 
Locke 4 
Reyes 8 
Ford 15 
Jarrah 16 
Shephard 23 
Kwon 42 

Answer 1

Zwei Probleme am ehesten:

1. Sie tun nein schließen Diesen Tag:

   <script src="https://d3js.org/d3.v4.min.js" charset="utf-8">

2. Und d3.js v4 abgeflachte den Namespace von d3.js v3 so:

   var x = d3.scale.linear()

sollte lauten:

var x = d3.scaleLinear()