gpt4 book ai didi

javascript - D3 js图表倒置问题

转载 作者:行者123 更新时间:2023-11-28 01:25:41 25 4
gpt4 key购买 nike

我的Fiddle

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

我尝试添加:

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

并在栏上调用它:

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

没有工作..

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

最佳答案

这个怎么样? 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 是图形区域的高度。检查评论中的评论(还没有足够的代表)

关于javascript - D3 js图表倒置问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22706147/

25 4 0
文章推荐: html - Pinnacle 购物车网站直接显示 html css 代码并且不产生任何影响
文章推荐: c++ - 使用 std::enable_if 的多变量模板特化
文章推荐: javascript -