NVD3.js multiChart x-Achsen-Beschriftungen ist ausgerichtet auf die Zeilen, aber nicht in bars

Als @Miichi erwähnt, dies ist ein Fehler in nvd3...

Ich bin überrascht, dass Sie eine TODO-um "herauszufinden, warum der Wert zu sein scheint verschoben", weil es ziemlich offensichtlich... Die Balken die Verwendung einer ordinalen Skala mit .rangeBands() und die line verwendet eine lineare Skala, und die beiden Skalen sind nie auf miteinander zu tun, außer, dass Sie die gleichen Endpunkte.

Als eine Lösung zu nehmen die ordinal-Skala aus den bars, und einfach einstellen, indem Sie die Hälfte der bar Breite, um die Linie auf der x-Skala. Würde, dass die Linie Punkte in der Mitte der Balken. Ich kann mir vorstellen, dass etwas ähnliches geschieht in der nv.models.linePlusBarChart dass @LarsKotthoff erwähnt.

Im Grunde, Sie Ihre Linie auf der x-Skala würde wie folgt Aussehen:

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

...wo xScaleBars ist die x-Skala verwendet, für die bar, die Teil des Diagramms.

Durch kämmen durch den source-code für nvd3, es scheint, dass sich diese Skala ist zugänglich wie chart.bars1.scale().

Vielleicht eines Tages die Autoren nvd3 entscheiden, dass Ihre Unordnung der Bibliothek auch ein Teil der Dokumentation. Für jetzt kann ich Ihnen zeigen, die Art der Sache, dass würde das problem lösen, indem Sie ein benutzerdefiniertes Diagramm, und zeigt, wie die beiden Skalen beziehen würde.

Erste, ich ' ll verwenden Ihre Daten, sondern Sie trennen die Linien und Balken, die Daten in zwei 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}
];

Dann einrichten der Waage für die bars. Für die x-Skala, werde ich die Verwendung einer ordinalen Skala und rangeRoundBands mit der Standard-Gruppe Abstand für nvd3 ist multiBar ist 0.1. Für die y-Achse verwende ich einen regulären linearen Skala, mit .nice() so, dass die Skala nicht auf eine unangenehme Wert, wie es standardmäßig in nvd3. Mit etwas Platz über dem größten Wert gibt Ihnen einige Kontext, die "nett" zu haben, wenn Sie versuchen zu interpretieren eines Diagramms.

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);

Nun hier ist der wichtige Teil,. Für die Leitung der x-Skala, machen Sie keine separate Skala, aber nur machen Sie es eine Funktion die bars' x-Skala:

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

Hier das komplette Beispiel als JSBin. Ich habe versucht zu dokumentieren, die große Abschnitte mit Kommentaren so ist es einfach zu befolgen Sie die Allgemeine Logik von Ihr. Wenn Sie herausfinden können, von der nvd3-source-code genau das, was jeder von der Elemente des multiChart aufgerufen werden und wie die einzelnen Skalen der einzelnen Teile, dann könnten Sie in der Lage, einfach stecken Sie die neue Skala.

Mein Gefühl ist es, dass Sie brauchen, um einen ziemlich guten Griff auf, wie d3 funktioniert, etwas nützliches zu tun mit nvd3, und wenn Sie wollen, um Sie anzupassen, sind Sie wahrscheinlich besser dran, nur Rollen Sie Ihre eigenen Diagramm. So erhalten Sie das komplette wissen und kontrollieren können, was die element Klassen-und Variablen-Namen der Teile des Diagramms sind, und können tun, was Sie wollen mit Ihnen. Wenn nvd3 bekommt die ordnungsgemäße Dokumentation, vielleicht wird sich eine einfache Lösung. Viel Glück, und ich hoffe, dass dies zumindest hilft Sie loslegen.