NVD3.js multiChart x轴标签与线条对齐，但不与条线对齐

Question

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

用红线标出标签所在的位置。

我制作了jsFiddle：http://jsfiddle.net/n2hfN/

谢谢！

Answer 1

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

我很惊讶他们有一个TODO来解决为什么价值似乎被转移＆＃34;因为它非常明显......条形使用带有.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-scale，我将使用序数比例rangeRoundBands和nvd3 multiBar的默认组间距为0.1。对于y标度，我使用.nice()使用常规线性标度，这样标度就不会像在nvd3中默认那样以尴尬值结束。有一些空间超过最大值会给你一些背景，这是很好的＆＃34;在尝试解释图表时有。

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的完整示例。我试图用评论记录主要部分，因此很容易遵循它的整体逻辑。如果您可以从nvd3源代码中确切地知道调用multiChart的每个元素以及如何设置组成部分的各个比例，那么您可能只需插入新的比例。

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