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

我正在使用NVD3.js

multiChart

在图表中显示多条线和条。一切正常，但x轴标签仅与直线点对齐，而不是与条形对齐。我想正确地将标签直接对齐，就像它应该对齐的那样。但我明白了：

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

我提出：

---

谢谢

正如@Miichi提到的，这是nvd3中的一个bug

我感到惊讶的是，他们要“弄清楚为什么价值会发生变化”，因为这很明显。。。条形图使用带有

.rangeBands（）

的顺序比例，直线使用线性比例，两个比例永远不会相互关联，除非它们共享相同的端点

一种解决方案是从条形图中提取顺序刻度，然后简单地将其调整为条形图宽度的一半，以形成线条的x刻度。这将使线条点位于线条的中心。我想@larskothoff提到的

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的

多条形图的默认组间距为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比例的函数：

下面是一个完整的示例。我试着用注释来记录主要部分，这样就很容易遵循它的总体逻辑。如果您能够从nvd3源代码中准确地了解multiChart的每个元素被调用了什么，以及如何设置组成部分的各个刻度，那么您就可以插入新的刻度

我的感觉是，你需要对d3的工作方式有一个很好的了解，才能用nvd3做任何有用的事情，如果你想定制它，你最好只是滚动你自己的图表。这样，您就可以完全了解并控制图表各部分的元素类和变量名，并且可以对它们执行任何操作。如果nvd3能够得到正确的文档，也许这将成为一个简单的修复。祝你好运，我希望这至少能帮助你开始。
你可以用直线加条形图代替。谢谢你的回答。但是在
nv.models.linePlusBarChart
中，我可以使用属性
bar
true | false
，对于不同的图表，我没有更多的选项。此外，我需要定位-在哪个轴上是线，在哪个轴上是条
multiChart
允许这样做。我想你可能会在nvd3中遇到一个错误：如果你检查源代码，你会发现一条评论说“//TODO:找出为什么在multiChart（multiChart反过来使用）的x坐标计算中该值出现移位”。感谢提供信息-我会检查它。谢谢！我看到你的例子是有效的，我认为你的答案是最好的（非常感谢如此深入的研究）。稍后我将尝试并报告结果。您提出重写NVD3图表，但在您的示例中，它使用的是简单的数据。我更新了更复杂的数据，不知道如何管理分组条和多行的可能性。我很乐意为您提供不同的方案，但评论不是讨论的地方。这是一个具体的问题，我给出了具体的回答。如果您针对您的新问题提出新问题，我们可以在那里进行讨论。我要说的一件事是，看起来multiChart模型像我一样分解数据，但它们使用过滤器。好吧，也许我的问题格式不对。所以我留下来接受它，但我不能使用它，所以我创建了一个新的-有没有办法显示多个具有相同标签的酒吧？
var xScaleLine = function(d) {
  var offset = xScaleBars.rangeBand() / 2;
  return xScaleBars(d) + offset;  
};