javascript - D3 js图表倒置问题

Question

我的Fiddle

我正在学习 d3js，我得到了带有一些数据的条形图的实现。 我需要反转图表。

我尝试添加:

var y = d3.scale.linear()
        .domain([0, d3.max(jsonData.year)])
        .range([500, 0]);

并在栏上调用它:

  .attr("y", function(d) {
            return y(d);
        });

没有工作..

我该如何解决这个问题？我想我错过了一些东西.. 这就是我想要的轴:

Answer 1

这个怎么样？ http://jsfiddle.net/jTs9A/3/

问题是你的变换，在底部附加 x 和 y 轴时平移坐标。

canvas.append("g")
    .call(xAxis)
    .attr("transform", "translate(0,0)");
canvas.append("g")
    .call(yAxis)
    .attr("transform", "translate(-10,0)");

您之前有 (0,250) 和 (-10,-50)

编辑: http://jsfiddle.net/jTs9A/4/

您需要添加以下内容:

 .attr("y", function(d) {
        return  (h- d.year*10);  //Height minus data value
    })

其中 h 是图形区域的高度。检查评论中的评论(还没有足够的代表)