简单的条形图d3 [英] Simple bar chart d3
问题描述
$ b HTML
<！DOCTYPE html>
< meta charset =utf-8>
< style>
.bar {
fill：steelblue;
}
.bar：hover {
fill：brown;
}
.axis - x路径{
display：none;
}
< / style>
< svg width =960height =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;}））; $ b $ （[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）{retur （d.frequency）; }）
.attr（width，x.bandwidth（））
.attr（height，function（d）{return height - y（d.frequency）;}）;
}）;
< / script>
data.tsv
字母频率
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
参考
请让我知道我在哪里做错了？
看起来问题是因为您的IDE了解.tsv文件中的TAB。
我怀疑如果你在第37行放置了一些控制台登录（或调试），你会看到字母和频率值被读入字母属性。即两个值之间的TAB未被识别。这个转折点将导致y的'南'值传播到每个矩形高度的'南'值。
可能有一个设置您的IDE允许标签按预期进行识别。
Copying simple example for barchart as per D3.js page still I am not getting anything on my screen except left black line. Can someone help me out?
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
Reference
Kindly, let me know where am I doing wrong?
It looks like the issue is because of the way your IDE is understanding the TABs in the .tsv file.
I suspect that if you put some console logging in (or debug) at line 37 you will see that both the letter and frequency value is being read into the "letter" property. i.e the TAB between the two values is not being recognised. This is turn will lead to a 'Nan' value for the y which propagates to a 'Nan' value for the height on each rect.
There is probably a setting in your IDE that allows the Tabs to be recognised as intended.
这篇关于简单的条形图d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
