D3 比例弄乱了我的条形图

Question

I'm writing a simple bar chart that draws a rect element for each piece of data. This is a part of my code without scales, which works fine:

const rect = svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => (i*4))
       .attr("y", (d) => h - d[1]/50)

However, if I add y-scale, my bars flip over, and if I add x-scale, I can only see one bar. Here's my code with scales:

const xScale = d3.scaleLinear()
  .domain([0, d3.max(dataset, (d) => d[0])]) 
  .range([padding, w - padding]);
  const yScale = d3.scaleLinear()
  .domain([0, d3.max(dataset, (d) => d[1])])
  .range([h - padding, padding]);

//some other code
  const rect = svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => xScale(i*4))
       .attr("y", (d) => yScale(d[1]/50))

Here's my CodePen with scales, that's what it looks like: http://codepen.io/enk/pen/vgbvWq?editors=1111

I'd be really greatful if somebody told me what am I doing wrong.

Answer 1

D3 scales are not messing with your chart. The problem here is simple.

Right now, this is your dataset:

[["1947-01-01", 243.1], ...]

As you can see, d[0] is a string (representing a date), not a number. And, in d3.scaleLinear , the domain is an array with two values only.

The solution here is using a scaleBand instead:

const xScale = d3.scaleBand()
    .domain(dataset.map(d => d[0]))
    .range([padding, w - padding]);

And changing the code of the rectangles to actually use the scales (I made several changes, check them):

const rect = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("width", xScale.bandwidth())
    .attr("x", (d => xScale(d[0]))) //xScale
    .attr("height", (d => h - yScale(d[1]))) //yScale
    .style("y", (d => yScale(d[1])))
    .attr("data-date", (d) => d[0])
    .attr("data-gdp", (d) => d[1])
    .attr("class", 'bar')

Here is your updated CodePen: http://codepen.io/anon/pen/NdJGdo?editors=0010