NVD3.js multiChart x轴标签与行对齐，但不与条对齐 [英] NVD3.js multiChart x-axis labels is aligned to lines, but not bars

问题描述

我使用NVD3.js multiChart 在图表中显示多个线和条。所有都工作正常，但x轴标签只对齐线点，而不是条。我想正确地对齐条形下面的标签，因为它应该。但我得到这个：

I am using NVD3.js multiChart to show multiple lines and bars in the chart. All is working fine, but the x-axis labels is aligned only to the line points, not bars. I want to correctly align labels directly below the bars as it should. But I get this:

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

With red lines I marked where the labels should be.

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

谢谢！

推荐答案

正如@Miichi提到的，​​这是nvd3中的错误...

As @Miichi mentioned, this is a bug in nvd3...

我很惊讶他们有一个TODO找出为什么值似乎移位因为它是很明显的...酒吧使用顺序量表与 .rangeBands（）和该线使用线性刻度，并且这两个刻度从来没有涉及到

I'm surprised that they have a TODO to "figure out why the value appears to be shifted" because it's pretty obvious... The bars use an ordinal scale with .rangeBands() and the line uses a linear scale, and the two scales are never made to relate to one another, except in that they share the same endpoints.

一个解决方案是从条形图中获取序数标度，并简单地将其调整为条形图宽度的一半制作线的x标度。这将把线点放在酒吧的中心。我想象类似的事情在 nv.models.linePlusBarChart 中提到的@LarsKotthoff。

One solution would be to take the ordinal scale from the bars, and simply adjust it by half of the bar width to make the line's x-scale. That would put the line points in the center of the bars. I imagine that something similar is done in the nv.models.linePlusBarChart that @LarsKotthoff mentioned.

基本上，你的行的x-scale看起来像这样：

Basically, your line's x-scale would look something like this:

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

...其中 xScaleBars

通过梳理nvd3的源代码，看起来这个标度可以作为图.bars1.scale（）。

By combing through the source code for nvd3, it seems that this scale is accessible as chart.bars1.scale().

也许有一天，nvd3的作者会决定他们的图书馆的kludge应该得到一些文档。现在，我可以通过制作自定义图表，并显示两个量表如何相关来显示可解决问题的 kind 。

Maybe someday the authors of nvd3 will decide that their kludge of a library deserves some documentation. For now, I can show you the kind of thing that would solve the problem, by making a custom chart, and showing how the two scales would relate.

首先，我将使用你的数据，但将行和bar数据分成两个数组：

First, I'll use your data, but separate the line and bar data into two arrays:

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-scale，我将使用序数量表和 rangeRoundBands 与nvd3的 multiBar 的默认组间距为0.1。对于y标度，我将使用一个常规的线性标度，使用 .nice（），以便缩放不会以一个尴尬的值结束，因为它在默认情况下nvd3。有一些高于最大值的空间给你一些上下文，这是在尝试解释图表时很好。

Then set up the scales for the bars. For the x-scale, I'll use an ordinal scale and rangeRoundBands with the default group spacing for nvd3's multiBar which is 0.1. For the y-scale I'll use a regular linear scale, using .nice() so that the scale doesn't end on an awkward value as it does by default in nvd3. Having some space above the largest value gives you some context, which is "nice" to have when trying to interpret a chart.

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-scale，不要制作单独的比例，而是使它成为条形的x标度的函数：

Now here's the important part. For the line's x-scale, don't make a separate scale, but just make it a function of the bars' x-scale:

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

下面是一个完整的例子： JSBin 。我试图记录主要部分的评论，所以很容易遵循它的总体逻辑。如果你可以从nvd3源代码中确切知道multiChart的每个元素是如何被调用的，以及如何设置组成部分的单个缩放，那么你可以插入新的缩放。

Here's the complete example as a JSBin. I've tried to document the major sections with comments so it's easy to follow the overall logic of it. If you can figure out from the nvd3 source code exactly what each of the elements of the multiChart are called and how to set the individual scales of the constituent parts, then you might be able to just plug in the new scale.

我的感觉是，你需要有一个很好的处理，如何d3的工作做任何有用的nvd3，如果你想定制它，可能更好只是滚动自己的图表。这样，你完全知道和控制你的图表部分的元素类和变量名，并且可以做任何你想要的。如果nvd3有正确的文档，也许这将成为一个简单的修复。祝你好运，我希望这至少可以帮助你开始。

My feeling on it is that you need to have a pretty good handle on how d3 works to do anything useful with nvd3, and if you want to customize it, you're probably better off just rolling your own chart. That way you have complete knowledge and control of what the element classes and variable names of the parts of your chart are, and can do whatever you want with them. If nvd3 ever gets proper documentation, maybe this will become a simple fix. Good luck, and I hope this at least helps you get started.

这篇关于NVD3.js multiChart x轴标签与行对齐，但不与条对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！