Таблица строк dc.js с отрицательными значениями не отображает полные строки

Question

Я создал диаграмму строк, чтобы показать некоторые отрицательные значения. Я хотел бы разместить диаграмму рядом с другой диаграммой строк с положительными значениями, поскольку для диаграммы строк не поддерживается стекирование.

Проблема в том, что строки не показаны полностью. Проблема с эластикой X. Диапазон шкалы по оси Х ограничен с самого низкого значения до самого высокого.

Я создал фрагмент, чтобы продемонстрировать bahaviour.

В примере диапазон составляет от -2000 до -800, что является значением минимума. Но мне, очевидно, нужно, чтобы это было от -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, необходимо указать зависимость в вашей package.json с помощью github url syntax:

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

Или, если вы не используете НПМ, и подделка CDN является приемлемым, вы можете использование:

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

Фрагмент откорректирован с использованием 2.0 beta 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>