負の値を持つdc.js行グラフは、完全な行を表示しません。

Question

負の値を表示するために行グラフを作成しました。行のチャートでスタッキングがサポートされていないので、正の値を持つ別の行グラフのすぐ隣にグラフを配置したいと思います。

問題は、行が完全に表示されないことです。 elasticXが問題になっているようです。 x軸のスケール範囲は、最小値から最大値までに制限されています。

私はバーハビールを示すためにスニペットを作成しました。

この例では、範囲は-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と32

問題は、2.1.0-devバージョンがかなり古いであること、である更新することができず、廃止されることができない2.0ベータ版で修正されましたdue to an apparent bug in npm。

開発タグは絶対に意味がありません！したがって、開発ブランチは、実際のCDNを介して配布することはできません。

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

それともあなたができる、あなたがNPMを使用していない、と偽のCDNが許容されている場合：あなたはdc.jsの開発版を使用したい場合は、github url syntaxを使用してpackage.jsonに依存関係を指定する必要があります下記を使用してください。

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>