Question

我正在编写一个简单的条形图，为每个数据绘制一个rect元素。这是我的代码的一部分，没有标度，工作正常：

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

但是，如果我添加y-scale，我的条形图会翻转，如果我添加x-scale，我只能看到一个条形图。这是我的代码，包括尺度：

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刻度并没有弄乱您的图表。这里的问题很简单。

现在，这是您的数据集：

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')代替：

list_nums

将矩形代码更改为实际使用刻度（我做了几处修改，检查它们）：

n + 1

以下是您更新的CodePen：http://codepen.io/anon/pen/NdJGdo?editors=0010

D3缩放了我的条形图

1 个答案: