d3.js圖表不會顯示使用tsv文件

-1

我是一個d3js noobie所以請忍受我。我正在關注如何使用外部數據文件創建條形圖Mike Bostock的step-by-step tutorial。我使用的文件格式爲tsv，我通過在Excel中輸入數據創建該文件，將其保存爲txt文件，然後將擴展名重命名爲tsv。然後，我設置了一個本地網絡服務器python -m SimpleHTTPServer每this SO answer d3.js圖表不會顯示使用tsv文件

儘管所有文件都出現在目錄列表中，但條形圖仍然不存在。我的控制檯中沒有出現錯誤。我想知道這是如何在我的tsv文件中分隔值的問題，雖然它看起來與示例相同。我非常感謝任何幫助，因爲我非常想開始使用d3js。

編輯：我不知道這是否是相關的，但本地服務器上的文件出現在地址：http://0.0.0.0:8000/

這裏的JS（直接從本教程複製）：

.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>

和TSV文件：

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

來源

2016-12-14 st4rgut

Excel使用自己的文件類型chracteristics創建文件，因此xls或xlsx與tsv不同。 tsv代表製表符分隔值，裏面的值用製表符縮進。這只是純文本文件格式正確。如果要使用d3.tsv（）函數將文件保存爲Excel中的tsv文件。否則，您也可以使用與tsv類似的csv（逗號分隔值）文件，除非所有文件都用逗號分隔。檢查d3 API參考中的d3.csv（）。 – Vlad

d3.tsv（）或d3.csv（）無法讀取xls或xlsx文件，並且將文件類型從xls或xlsx更改爲tsv或txt不會使d3中的文件可讀。 – Vlad

你應該在你的web應用程序根文件夾中有本地文件，名爲：data2.tsv – Vlad

兩個問題最有可能的：

你這樣做不關閉這個標籤：

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8">
而且d3.js V4扁平從d3.js V3這樣的命名空間：

var x = d3.scale.linear()

應爲：

var x = d3.scaleLinear()

來源

2016-12-14 18:42:19

d3.js圖表​​不會顯示使用tsv文件

回答

相關問題

d3.js圖表不會顯示使用tsv文件