単純な棒グラフd3

単純な例をbarchartにコピーすると、D3.jsページごとにと表示されますが、まだ黒い線を除いて画面上に何も表示されません。誰かが私を助けることができますか？単純な棒グラフd3

HTML

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.bar { 
    fill: steelblue; 
} 

.bar:hover { 
    fill: brown; 
} 

.axis--x path { 
    display: none; 
} 

</style> 
<svg width="960" height="500"></svg> 
<script src="https://d3js.org/d3.v4.min.js"></script> 
<script> 

var svg = d3.select("svg"), 
    margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom; 

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), 
    y = d3.scaleLinear().rangeRound([height, 0]); 

var g = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.tsv("data.tsv", function(d) { 
    d.frequency = +d.frequency; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

    x.domain(data.map(function(d) { return d.letter; })); 
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

    g.append("g") 
     .attr("class", "axis axis--x") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)); 

    g.append("g") 
     .attr("class", "axis axis--y") 
     .call(d3.axisLeft(y).ticks(10, "%")) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", "0.71em") 
     .attr("text-anchor", "end") 
     .text("Frequency"); 

    g.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.letter); }) 
     .attr("y", function(d) { return y(d.frequency); }) 
     .attr("width", x.bandwidth()) 
     .attr("height", function(d) { return height - y(d.frequency); }); 
}); 

</script>

data.tsv

letter frequency 
A .08167 
B .01492 
C .02782 
D .04253 
E .12702 
F .02288 
G .02015 
H .06094 
I .06966 
J .00153 
K .00772 
L .04025 
M .02406 
N .06749 
O .07507 
P .01929 
Q .00095 
R .05987 
S .06327 
T .09056 
U .02758 
V .00978 
W .02360 
X .00150 
Y .01974 
Z .00074

リファレンス

https://bl.ocks.org/mbostock/3885304

私が間違っていることを教えてください。

出典

2016-10-21 Deadpool

IDEが.tsvファイル内のTABを理解しているために問題が発生しているようです。

私はある種のコンソールログイン（またはデバッグ）を37行目に置くと、文字と頻度の両方の値が「文字」プロパティに読み込まれていることがわかります。すなわち、2つの値の間のTABは認識されない。これは、各矩形の高さの 'Nan'値に伝播するyの 'Nan'値につながります。

おそらく、タブに意図したとおりに認識される設定がIDEにあります。

出典

2016-10-21 11:27:01 bartelski

私は、テキストファイルに保存し、フォーマットで保存するコンテンツを取得しようとしていた。 Excelで同じものをコピーして保存したとき。出来た！ – Deadpool

答えて

関連する問題