javascript - D3 秤弄乱了我的条形图

Question

我正在编写一个简单的条形图，为每条数据绘制一个矩形元素。这是我没有比例的代码的一部分，它工作正常:

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

但是，如果我添加 y 尺度，我的条就会翻转，如果我添加 x 尺度，我只能看到一个条。这是我的带有比例的代码:

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

这是我的带有刻度的 CodePen，它看起来像这样:http://codepen.io/enk/pen/vgbvWq?editors=1111

如果有人告诉我我做错了什么，我会非常感激。

Answer 1

D3 比例不会弄乱您的图表。这里的问题很简单。

现在，这是您的数据集:

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

如您所见，d[0] 是一个字符串(代表日期)，而不是数字。而且，在 d3.scaleLinear 中，定义域是一个只有两个值的数组。

这里的解决方案是使用 scaleBand 代替:

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

并更改矩形的代码以实际使用比例(我做了几处更改，检查它们):

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')

这是您更新后的 CodePen:http://codepen.io/anon/pen/NdJGdo?editors=0010