【问题标题】:NVD3.js multiChart x-axis labels is aligned to lines, but not barsNVD3.js multiChart x 轴标签与线对齐,但不与条对齐
【发布时间】:2014-08-28 21:04:09
【问题描述】:

我正在使用 NVD3.js multiChart 在图表中显示多条线和条。一切正常,但 x 轴标签仅与线点对齐,而不是与条对齐。我想正确地在条形下方正确对齐标签。但我明白了:

我用红线标出了标签的位置。

我做了jsFiddle:http://jsfiddle.net/n2hfN/

谢谢!

【问题讨论】:

  • 你可以使用折线加条形图来代替。
  • 感谢您的回答。但是在nv.models.linePlusBarChart我可以使用属性bartrue|false,对于不同的图表,我没有更多的选择。
  • 另外,我需要定位 - 在哪个轴上是线,在哪个轴上是条形。 multiChart 允许这样做。
  • 我认为您可能遇到了 nvd3 中的一个错误:如果您检查源代码,您会在 x - multiBar 的坐标计算(它又被 multiChart 使用)。
  • 感谢您提供信息 - 我会检查一下。

标签: d3.js nvd3.js


【解决方案1】:

正如@Miichi 所说,这是nvd3 中的一个错误...

令我惊讶的是,他们有一个 TODO 来“找出为什么值似乎发生了变化”,因为这很明显......条形使用带有 .rangeBands() 的序数刻度,而线条使用线性刻度,并且这两个尺度从来没有相互关联,除非它们共享相同的端点。

一种解决方案是从条形图中获取序数比例,然后简单地将其调整为条形宽度的一半以形成线条的 x 比例。这会将线点放在条形的中心。我想在@LarsKotthoff 提到的nv.models.linePlusBarChart 中也做了类似的事情。

基本上,您的生产线的 x 比例如下所示:

var xScaleLine = function(d) {
  var offset = xScaleBars.rangeBand() / 2;
  return xScaleBars(d) + offset;  
};

...其中xScaleBars 是用于图表条形部分的 x 比例。

通过梳理 nvd3 的源代码,这个比例似乎可以通过chart.bars1.scale() 访问。

也许有一天 nvd3 的作者会决定,他们的图书馆组合值得一些文档。现在,我可以通过制作一个自定义图表并展示这两个比例如何关联,向您展示可以解决问题的种类

首先,我将使用您的数据,但将线和条数据分成两个数组:

var barData = [
  {"x":0,"y":6500},
  {"x":1,"y":8600},
  {"x":2,"y":17200},
  {"x":3,"y":15597},
  {"x":4,"y":8600},
  {"x":5,"y":814}
];

var lineData = [
  {"x":0,"y":2},
  {"x":1,"y":2},
  {"x":2,"y":4},
  {"x":3,"y":6},
  {"x":4,"y":2},
  {"x":5,"y":5}
];

然后设置条形的比例。对于 x 比例,我将使用序数比例和 rangeRoundBands,nvd3 的 multiBar 的默认组间距为 0.1。对于 y 比例,我将使用常规线性比例,使用.nice(),这样比例就不会像 nvd3 中的默认值那样以尴尬的值结束。在最大值上方留出一些空间可以为您提供一些上下文,这在尝试解释图表时“很好”。

var xScaleBars = d3.scale.ordinal()
  .domain(d3.range(barData.length))
  .rangeRoundBands([0, w], 0.1);

var yScaleBars = d3.scale.linear()
  .domain([0, d3.max(barData, function(d) {return d.y;})])
  .range([h, 0])
  .nice(10);

现在这是重要的部分。对于线条的 x 比例,不要单独制作比例,而只需 使其成为条的 x 比例的函数

var xScaleLine = function(d) {
  var offset = xScaleBars.rangeBand() / 2;
  return xScaleBars(d) + offset;  
};

这是JSBin 的完整示例。我已经尝试用 cmets 记录主要部分,因此很容易遵循它的整体逻辑。如果您可以从 nvd3 源代码中准确了解 multiChart 的每个元素被称为什么以及如何设置组成部分的各个比例,那么您也许可以插入新的比例。

我的感觉是,您需要很好地了解 d3 如何使用 nvd3 做任何有用的事情,如果您想自定义它,最好只滚动您自己的图表。这样,您就可以完全了解和控制图表各部分的元素类和变量名称,并且可以对它们做任何您想做的事情。如果 nvd3 得到适当的文档,也许这将成为一个简单的修复。祝你好运,我希望这至少可以帮助你入门。

【讨论】:

  • 谢谢!我看到您的示例正在发挥作用,并且正在接受您的最佳答案(非常感谢您进行如此深入的研究)。我稍后会尝试并报告结果。
  • 您提议重写 NVD3 图表,但在您的示例中使用的是简单数据。我用更复杂的数据更新了 fiddle jsfiddle.net/n2hfN/28,但不明白如何管理分组条形和多行可能性。
  • 我很乐意帮助您解决不同的情况,但 cmets 不是讨论的地方。这是一个具体的问题,我给出了具体的答案。如果您针对您的新问题提出新问题,我们可以在那里讨论。我要说的一件事是,multiChart 模型看起来就像我所做的那样分解数据,但他们使用过滤器来做到这一点。 Here are the relevant lines in the source code
  • 好的,也许我没有正确格式化我的问题。所以我接受了它,但我不能使用它,所以我创建了一个新的 - stackoverflow.com/questions/24797605/…
  • 有什么方法可以显示多个具有相同标签的栏?
猜你喜欢
  • 2014-09-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多