dc.js Row-Chart mit negativen Werten zeigt keine vollen Zeilen

Question

Ich habe ein Zeilen-Chart erstellt, um einige negative Werte anzuzeigen. Ich möchte das Diagramm direkt neben einem anderen Zeilendiagramm mit positiven Werten platzieren, da das Stapeln für das Zeilendiagramm nicht unterstützt wird.

Das Problem ist, dass die Zeilen nicht vollständig angezeigt werden. elasticX scheint das Problem zu sein. Der Skalierungsbereich der X-Achse ist vom niedrigsten Wert bis zum höchsten Wert begrenzt.

Ich habe ein Schnipsel erstellt, um das Verhalten zu demonstrieren.

Im Beispiel liegt der Bereich zwischen -2000 und -800, was der niedrigste Wert ist. Aber ich brauche es natürlich -2000 bis 0. Ich habe keine Lösung bekommen. So würde jede Hilfe sehr geschätzt werden!

var data = [{ 
 
    "name": "A", 
 
    "out": 1000 
 
}, { 
 
    "name": "B", 
 
    "out": 1200 
 
}, { 
 
    "name": "C", 
 
    "out": 1500 
 
}, { 
 
    "name": "D", 
 
    "out": 800 
 
}, { 
 
    "name": "E", 
 
    "out": 2000 
 
}]; 
 

 
var rowChart = dc.rowChart("#rowChart"); 
 

 
var ndx = crossfilter(data), 
 

 
    nameDimension = ndx.dimension(function(d) { 
 
    return d.name; 
 
    }), 
 
    outGroup = nameDimension.group().reduceSum(function(d) { 
 
    return -d.out; 
 
    }); 
 
    
 
rowChart.width(300) 
 
    .height(500) 
 
    .margins({top: 10, right: 10, bottom: 30, left: 50}) 
 
    .dimension(nameDimension) 
 
    .group(outGroup) 
 
    .elasticX(true) 
 
    .xAxis().ticks(2); 
 

 
dc.renderAll();

<script src='https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.5/crossfilter.min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.min.js'></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.css"/> 
 

 
<div id="rowChart"> </div>

Answer 1

Diese bug was reported as #879 und wurde in 2.0 beta 32 befestigt

Problem ist, dass die 2.1.0-dev Version ziemlich alt ist, kann nicht aktualisiert werden, und nicht veraltet sein können due to an apparent bug in npm.

Ein Entwicklungstag macht absolut keinen Sinn! So kann der Entwicklungszweig nicht über ein echtes CDN verteilt werden. Wenn Sie die Entwicklungsversion von dc.js verwenden möchten, müssen Sie die Abhängigkeit in Ihrem package.json angeben github url syntax mit:

"dc": "dc-js/dc.js#develop" 

Oder wenn Sie nicht npm verwenden, und eine Fälschung CDN akzeptabel ist, können Sie Verwenden Sie:

https://cdn.rawgit.com/dc-js/dc.js/develop/dc.js 

Snippet mit 2.0 Beta 33 unten korrigiert.

Hoffentlich schieben wir bald eine echte Version 2.1 und 2.1.0-dev wird begraben werden.

var data = [{ 
 
    "name": "A", 
 
    "out": 1000 
 
}, { 
 
    "name": "B", 
 
    "out": 1200 
 
}, { 
 
    "name": "C", 
 
    "out": 1500 
 
}, { 
 
    "name": "D", 
 
    "out": 800 
 
}, { 
 
    "name": "E", 
 
    "out": 2000 
 
}]; 
 

 
var rowChart = dc.rowChart("#rowChart"); 
 

 
var ndx = crossfilter(data), 
 

 
    nameDimension = ndx.dimension(function(d) { 
 
    return d.name; 
 
    }), 
 
    outGroup = nameDimension.group().reduceSum(function(d) { 
 
    return -d.out; 
 
    }); 
 
    
 
rowChart.width(300) 
 
    .height(500) 
 
    .margins({top: 10, right: 10, bottom: 30, left: 50}) 
 
    .dimension(nameDimension) 
 
    .group(outGroup) 
 
    .elasticX(true) 
 
    .xAxis().ticks(2); 
 

 
dc.renderAll();

<script src='https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.5/crossfilter.min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.33/dc.js'></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.33/dc.css"/> 
 

 
<div id="rowChart"> </div>