DC.JS Zusammengesetztes Diagramm, das den letzten Wert nicht anzeigt

Question

Ich habe ein zusammengesetztes Balken-/Liniendiagramm, das mit Ausnahme des letzten Balkens korrekt angezeigt wird. Die Daten enthalten eine Dimension von 8 Daten und zwei Wertegruppen, eine für den Balken und eine für das Liniendiagramm. Ich habe den Inhalt der Dimesnions und Gruppen untersucht und alles richtig gemacht.

Der 8. svg auf dem Diagramm ist vorhanden, aber der Balken wird nicht angezeigt, siehe angehängtes Bild. SVG Inspector zeigt an, dass ein Rect mit Höhe und Breite definiert wurde, obwohl ein entsprechender Balken nicht im Diagramm angezeigt wird.

Ich habe mit .centerBar und .elasticX, .xAxisPadding gespielt und hatte keinen Erfolg. Ich habe auch versucht, Diagrammmaße und Ränder zu ändern.

-Code verwendet, um das Diagramm angezeigt werden:

var firstWeek = d3.min(data, function (d) { return d.Week; }); 
var lastWeek = d3.max(data, function (d) { return d.Week; }); 

     var compositeKPIChart = dc.compositeChart("#W-chart"); 

     var KPIbChart = dc.barChart(compositeKPIChart); 

     var KPIlChart = dc.lineChart(compositeKPIChart); 

     compositeKPIChart.width(width) 
       .height(0.9*width/2) 
       .margins({ top: 10, right: 50, bottom: 30, left: 30 }) 
       .dimension(weekDim) 
       .x(d3.time.scale().domain([firstWeek, lastWeek])) 
       .xUnits(d3.time.mondays) 
       .y(d3.scale.linear().domain([0, 100])) 
       .compose([ 
        dc.barChart(compositeKPIChart).group(barGroup, "%"), 
        dc.lineChart(compositeKPIChart).group(lineGroup, "Standard") 
       ]) 
       .brushOn(false) 
       .xAxis().ticks(d3.time.mondays).tickFormat(d3.time.format("%d %b")); 

Answer 1

Wenn das Element vorhanden ist, aber nicht angezeigt wird, ist das erste, was ich überprüfen würde das Clipping-Rechteck. Sie können es im Debugger löschen (oder benennen Sie den Link, so dass der Verweis unterbrochen ist), um Ihre fehlende Leiste zu sehen.

Aber das erklärt nicht, warum es an erster Stelle fehlt. Vermutlich geht es darum, dass deine X-Domain zu klein ist. Beachten Sie, dass die Balken linksbündig mit den entsprechenden Ticks ausgerichtet sind (während die Punkte auf den Linien offensichtlich keine Breite haben), so dass Sie möglicherweise eine Woche zum Anfang Ihrer Domain hinzufügen müssen, damit die Leiste angezeigt wird.

dc.js neigt dazu, Domains ziemlich wörtlich zu nehmen, außer in einigen wenigen Fällen.

Ich bin überrascht centerBar hat nicht geholfen, wenn dies der Fall ist.