javascript - 将 Y 轴上下颠倒

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 高度只有 150 像素。因此，改变你的比例:

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

这是您更新的 fiddle :https://jsfiddle.net/bga2q72f/

PS:x 和 y 位置不要使用相同比例。实在是太困惑了。