带有负值的dc.js行图不显示完整行

Question

我创建了一个行图以显示一些负值。我想将图表放置在具有正值的另一行图表旁边，因为行图表不支持堆叠。

问题是，行没有完整显示。 elasticX似乎是问题所在。 x轴刻度范围从最低值到最高值受到限制。

我创建了一个片段来演示bahaviour。

在示例中，范围从-2000到-800，这是lowes值。但我显然需要它-2000到0. 我没有得到解决方案。所以任何帮助将不胜感激！

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

这bug was reported as #879并固定在2.0的β32.

问题是，该2.1.0-dev版本是很老，不能被更新，并且不能被弃用due to an apparent bug in npm。

开发标签绝对没有意义！所以开发分支不能通过真正的CDN分发。如果你想使用dc.js的开发版本，你需要使用github url syntax指定在package.json的依赖：

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

或者，如果你不使用NPM和假CDN是可以接受的，你可以使用：

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

通过使用下面的2.0测试版33更正了代码段。

希望我们很快会推出一个真正的版本2.1和2.1.0-dev将被埋葬。

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>