2014-03-13 2 views
8

Wie können Sie für NVD3 multiBarChart Balken mit Nullwerten entfernen? Ich habe versucht, den y-Wert auf null zu setzen, aber sie werden nicht weggehen.NVD3-Diagramme entfernen 0 Werteleiste

Ich habe leider nicht genug Ruf, um ein Bild zu veröffentlichen, also hier ist Ascii zeigt das Problem. Es gibt zwei gestapelte Reihe in der folgenden ASCII-Diagramm - X und Z, mit Unterstrichen (_), die Nullwert-Stäbe in der Z-Serie:

| 
|  _ 
|  _ X 
| _ X X X 
| _ X X X X X 
| X X X X X X 
      Z Z 
      Z 

Was ich brauche, ist die folgende:

| 
|  
|  X 
|  X X X 
| X X X X X 
| X X X X X X 
      Z Z 
      Z 

Edit: hier ist die JSFiddle für den Graphen http://jsfiddle.net/dnn4K/1/

ich einen versuchten fix von mir aufgenommen haben, die (aber nicht in der Geige aus irgendeinem Grund) etwas funktioniert. Der versuchte Fix findet das erste Rechteck durch einen CSS-Selektor und durchläuft sie mit rect.next(), wobei die Höhe auf 0 gesetzt wird, wenn die Höhe 1 ist. Der Grund, warum dies für mich nicht funktioniert, ist, weil die Rechtecke dies nicht tun existieren bis zum Aufruf der Funktion - so muss ich nun herausfinden, wie man die Funktion ausführen kann, nachdem die Animation fertig ist.

+0

Können Sie Ihren Arbeitscode auf [JSFiddle] (jsfiddle.net) setzen, damit jemand mit Ihnen Problem helfen kann. – shabeer90

+0

Arbeiten daran. Ich kann nicht den gleichen Code bekommen, der auf JSFiddle läuft - würdest du zufällig wissen, wie man die externen Ressourcen für NVD3 dort richtig laufen lässt? Ich habe sie alle geladen, aber es scheint immer noch nicht zu funktionieren. – jperezov

+0

Stellen Sie sicher, dass Ihre externen URLs funktionieren. Überprüfen Sie immer die Browserkonsole, um festzustellen, ob ein Fehler vorliegt. – shabeer90

Antwort

20

Eigentlich fand ich, dass die Änderung des nvd3 Quellcodes keine echte Lösung war.

Also habe ich einfach eine übergeordnete CSS-Regel hinzugefügt, die alle genau 1-Pixel-Höhe rect da draußen verbirgt.

Immer noch nicht optimal, aber wir müssen auf eine neue Version von nvd3 mit hoffentlich ein voll konfigurierbares Modell warten, um das richtig zu machen.

.nvd3 rect[height="1"] { 
    display: none !important; 
} 
3

Endete die Antwort herauszufinden. In der nv.d3.js Datei gibt es die folgende Codezeile:

.attr('height', function(d,i) { 
      return Math.max(Math.abs(y(d.y + (stacked ? d.y0 : 0)) - y((stacked ? d.y0 : 0))),1); //Min value of stacked bar charts set here 
     }) 

Dies ist auf die folgende geändert werden muss:

.attr('height', function(d,i) { 
      return Math.max(Math.abs(y(d.y + (stacked ? d.y0 : 0)) - y((stacked ? d.y0 : 0))),0); //Min value of stacked bar charts set here 
     }) 

Und das ist es. Der Min-Wert wird für gestapelte Balkendiagramme buchstäblich nur als 1 anstelle von 0 festgelegt. Dies war in der MultiBar-Funktion der Datei nv.d3.js um die Zeile 7804. Hoffentlich hilft das jemand anderem mit dem gleichen Problem.

Verwandte Themen