Question

我在D3中创建了一个简单的条形图，但条形图是从上到下而不是从下到上创建的。下面是xScale，yScale和bar生成代码：

var xscale = d3.scale.linear()
  .domain([0, data.length])
  .range([0, 240]);

var yscale = d3.scale.linear()
  .domain([0, 100])
  .range([0, 240]);

var bar = canvas.append('g')
  .attr("id", "bar-group")
  .attr("transform", "translate(10,20)")
  .selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr("class", "bar")
  .attr("height", function(d, i) {
    return yscale(d);
  })
  .attr("width", 15)
  .attr("x", function(i) {
    return yscale(i);
  })
  .attr("y", 0)
  .style("fill", function(i) {
    return colors(i);
  });

尝试交换yScale范围，但没有成功。 Here is the fiddle.

Answer 1

在SVG坐标系中，原点（0,0）位于顶部左角，而不是左下角。

除此之外，你的SVG只有150px的高度。因此，改变你的规模：

var yscale = d3.scale.linear()
    .domain([0, 100])
    .range([0, 150]);

你的酒吧数学：

.attr("height", function(d, i) {
    return yscale(d);
})
.attr("y", function(d){
    return 150 - yscale(d)
})

这是您更新的小提琴：https://jsfiddle.net/bga2q72f/

PS：不要将相同的比例用于x和y位置。这很令人困惑。

将Y轴上下颠倒

1 个答案: