Question

我想使用DC.JS创建堆积条形图。

我已尝试使用DC.JS（graph，source code）中的文档无效 - 以下是我的尝试（here is my attempt in jsfiddle）和我最近的尝试在CodePen。

我喜欢＆＃39;姓名＆＃39;作为X轴和＆＃39;类型＆＃39;作为堆栈。

HTML

function insertText(element, value) 
{
   var element_dom = document.getElementsByName(element)[0];
   if (document.selection) 
   {
      element_dom.focus();
      sel = document.selection.createRange();
      sel.text = value;
      return;
    } 
   if (element_dom.selectionStart || element_dom.selectionStart == "0") 
   {
     var t_start = element_dom.selectionStart;
     var t_end = element_dom.selectionEnd;
     var val_start = element_dom.value.substring(value, t_start);
     var val_end = element_dom.value.substring(t_end, element_dom.value.length);
     element_dom.value = val_start + value + val_end;
   } 
   else
   {
      element_dom.value += value;
   }
}

的Javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script src="https://cdnjs.site44.com/dc2.js"></script>
<div id="chart"></div>

我已经习惯了一段时间，我还有一些额外的发现：

当我用以下内容替换数据数组时，它可以正常工作

data = [{＆＃34; Name＆＃34;：＆＃34; Abby＆＃34;，＆＃34; Type＆＃34;：＆＃34; 1＆＃34;}，{＆＃34; Name＆＃34;：＆＃34; Abby＆＃34;，＆＃34;输入＆＃34;：＆＃34; 2＆＃34;}，{＆＃34;姓名＆＃34;：＆＃34; Bob＆＃34; ，＆＃34;输入＆＃34;：＆＃34; 1＆＃34;}]
但只有在我用dc 2.1.0-dev（https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js）

https://github.com/dc-js/dc.js/blob/develop/web/js/dc.js

但是，当我用以下内容替换数据数组时，它不起作用：

data = [{＆＃34; Name＆＃34;：＆＃34; Abby＆＃34;，＆＃34; Type＆＃34;：＆＃34; 3＆＃34;}，{＆＃34; Name＆＃34;：＆＃34; Abby＆＃34;，＆＃34;输入＆＃34;：＆＃34; 4＆＃34;}，{＆＃34;姓名＆＃34;：＆＃34; Bob＆＃34; ，＆＃34;输入＆＃34;：＆＃34; 2＆＃34;}]

我认为根本问题在于root_function。

Answer 1

在当前示例中，v.Speed始终为NaN。因为+x.Type尝试将类似“Apple”的字符串转换为数字而失败。如果您只想计算，请在减速器中添加或减去1，而不是v.Speed。然后，您需要更新sel_stack代码和图表代码以处理此更改。

以下是数据中两种类型的工作示例。您必须更新它以处理任意数量的类型，可能是通过预先构建所有类型的数组，然后循环遍历它以向图表添加堆栈：http://codepen.io/anon/pen/GjjyOv?editors=1010

var data = [ {"Name":"Abby","Type":"Apple"}, {"Name":"Abby","Type":"Banana"}, {"Name":"Bob","Type":"Apple"} ]

var ndx = crossfilter(data)

var xdim = ndx.dimension(function (d) {return d.Name;});

在reducer中，只需加1并减1来计数：

var ydim = xdim.group().reduce(
  function(p, v) {
    p[v.Type] = (p[v.Type] || 0) + 1;
    return p;}, 
  function(p, v) {
    p[v.Type] = (p[v.Type] || 0) - 1;
    return p;}, 
  function() {
    return {};
  });

sel_stack不再需要一个数字，而是一个密钥：

function sel_stack(valueKey) {
return function(d) {
  return d.value[valueKey];
};}

var chart = dc.barChart("#chart");

为了示例的目的，我们在这里硬编码堆栈密钥：

chart
  .x(d3.scale.ordinal().domain(xdim))
  .dimension(xdim)
  .group(ydim, "Apple", sel_stack('Apple'))
  .xUnits(dc.units.ordinal);

再次，另一个硬编码的堆栈密钥。在创建包含所有堆栈值的某种数据结构之后，您需要重新创建循环。

//for(var i = 2; i<6; ++i)
  chart.stack(ydim, 'Banana', sel_stack('Banana'));

chart.render();

如何使用dc.js创建堆积条形图？

1 个答案: