Question

我发现的大多数示例都使用具有时间和数字的数据

var data =      [
  {
    "Time": "19-Jan-2018 11:24:49.000 UTC",
    "Speed": 1.885
  },
  {
    "Time": "19-Jan-2018 11:24:59.000 UTC",
    "Speed": 1.875
  },
  {
    "Time": "19-Jan-2018 11:25:00.000 UTC",
    "Speed": 1.878
  },
  {
    "Time": "19-Jan-2018 11:25:01.000 UTC",
    "Speed": 1.876
  }
]

我正在寻找堆叠类型

    var data =      [
  {
    "Time": "19-Jan-2018 11:24:49.000 UTC",
    "type": "CAT"
  },
  {
    "Time": "19-Jan-2018 11:24:59.000 UTC",
    "type": "DOG"
  },
  {
    "Time": "19-Jan-2018 11:25:00.000 UTC",
    "type": "CAT"
  },
  {
    "Time": "19-Jan-2018 11:25:01.000 UTC",
    "Type": "BAT"
  }
]

如何在允许用户选择时间/类别对的同时堆叠类别数据，如以下Example所示？

Answer 1

我将示例修改为this fiddle中的时间/类别数据。

这些日期只能在Chrome中解析，所以

const parseDate = d3.utcParse("%d-%b-%Y %H:%M:%S.%L UTC");
data.forEach(d => {
  d.Time = parseDate(d.Time);
})

我将键功能更改为使用,

function multikey(x,y) {
  return x + ',' + y;
}
function splitkey(k) {
  return k.split(',');
}

我还更改了伪造的stack_second组，将字符串日期从多键转换回Dates，并将类别初始化为0（因为必须为每个X提供每个堆栈）。

function stack_second(group, categories) {
  return {
    all: function() {
      var all = group.all(),
          m = {};
      // build matrix from multikey/value pairs
      all.forEach(function(kv) {
        var ks = splitkey(kv.key);
        m[ks[0]] = m[ks[0]] || Object.fromEntries(categories.map(c=>[c,0]));
        m[ks[0]][ks[1]] = kv.value;
      });
      // then produce multivalue key/value pairs
      return Object.keys(m).map(function(k) {
        return {key: new Date(k), value: m[k]};
      });
    }
  };
}

从源数据获取类别数组：

const categories = Array.from(new Set(data.map(d => d.Type)).values());

在处理日期/时间时，您必须选择适合您的数据的d3 time interval。分钟在这里看起来不错。因为您的源数据是UTC，所以到处都使用UTC d3时间方法。

const interval = d3.utcMinute;

计算xscale域并应用：

let extent = d3.extent(data, d=>d.Time);
extent[1] = interval.offset(extent[1], 1)
chart
  .x(d3.scaleTime().domain(extent))
  .xUnits(interval.range)

正确的刻度数，也采用UTC格式：

chart.xAxis().ticks(d3.utcMinute).tickFormat(d3.utcFormat('%H:%M'))

在堆栈和楔形之间使用

匹配颜色

.colors(d3.scaleOrdinal().domain(categories).range(d3.schemeCategory10))

交叉过滤器初始化，使用时间间隔和类别：

const interval = d3.utcMinute; // choose appropriate to your data
var cf = crossfilter(data),
    timeTypeDim = cf.dimension(function(d) { return multikey(interval(d.Time), d.Type); }),
    timeTypeGroup = timeTypeDim.group(), // reduceCount by default
    stackedGroup = stack_second(timeTypeGroup, categories);

这是完整性的图表代码，尽管我们已经讨论了相关部分：

function sel_stack(i) {
  return function(d) {
    return d.value[i];
  };
}
chart
  .width(600)
  .height(400)
  .colors(d3.scaleOrdinal().domain(categories).range(d3.schemeCategory10))

  .controlsUseVisibility(true)
  .x(d3.scaleTime().domain(extent))
  .xUnits(interval.range)
  .margins({left: 80, top: 20, right: 10, bottom: 20})
  .brushOn(false)
  .clipPadding(10)
  .title(function(d) {
  return d.key + '[' + this.layer + ']: ' + d.value[this.layer];
})
  .legend(dc.legend().x(540).y(50))
  .dimension(timeTypeDim)
  .group(stackedGroup, categories[0], sel_stack(categories[0]))
  .renderLabel(true);

如何在dc.js中呈现时间序列/分类堆叠的条形图，如何过滤堆叠和条形图

1 个答案: