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 beta 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 beta 33修正了代码段。

希望我们很快推出真正的2.1版，2.1.0-dev将被埋没。

＆＃13;

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();

＆＃13;

<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>

＆＃13;

Answer 2

我注意到外部脚本的顺序错误-crossfilter.js依赖d3.js，因此它应该在dc.js之后但之前；也许这就是为什么图表无法正确显示的原因。

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

2 个答案: