javascript - 具有不同 y 轴/刻度的分组条形图

标签 javascript d3.js

我正在尝试创建一个包含 70 个样本和 2 个系列的分组条形图。类似于这个例子:

http://bl.ocks.org/882152

然而,一个系列是 [0 ... 1],另一个系列是 [0 ... 1.000.000]。我无法用我的数字重新创建示例。

我也不太明白这个例子。不应该切换变量,即 x -> y,y0 -> x0 和 y1 -> x0?或者它们不代表 x 和 y 轴?

谢谢!

编辑:

这是一个演示我的问题的示例(查看控制台)。 http://jsfiddle.net/kQSGF/3/

最佳答案

问题似乎来自比例定义:

var x = d3.scale.linear().domain([0, 1]).range([h, 0]);

域设置为 [0,1],但实际上只有您的第一个数据系列落在该范围内。 您可以考虑将域设置为数据的范围,并反转输出范围,以便它显示数据中的值而不是将“非”值量显示为条形:

var x = d3.scale.linear().domain(d3.extent(d3.merge(data))).range([0,h]);

请注意,您仍然不太可能看到较小的数据系列,因为您的数据范围差异如此之大

关于javascript - 具有不同 y 轴/刻度的分组条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10121720/

相关文章:

javascript - Tone.js 错误 : 'Start time must be strictly greater than previous start time'

javascript - 理解 Elm 中的类型

javascript - 如何在 Cytoscape JS 中设置节点的位置

javascript - 在矩形中插入文本 - D3.js

javascript - D3 一页上每个图表的鼠标悬停效果

d3.js - 将图像的 anchor 移动到其中心

javascript - 从组件文件和 View 模型生成原始 HTML 字符串

javascript - 如何使用 Javascript 删除多维数组中的空元素

javascript - 为什么dimple.js 示例需要 Web 服务器才能运行?

javascript - 创建矩形后如何动态附加文本