Simple bar chart d3 | 易学教程

问题

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

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

Kindly, let me know where am I doing wrong?

回答1:

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.

来源：https://stackoverflow.com/questions/40175029/simple-bar-chart-d3

标签

javascript

d3.js

graph

charts

bar-chart