如何在dc.js中按堆栈过滤堆积的折线图? [英] How do I filter a stacked line chart by stack in dc.js?

问题描述

我正在为仪表板制作堆积的折线图:

I am making a stacked line chart for a dashboard:

var json = [...]
var timeFormat = d3.time.format.iso;
json = json.map(function(c){
    c.date = timeFormat.parse(c.date);
  return c;
});
var data = crossfilter(json);
var days = data.dimension(function (d) {
  return d.date;
});
var minDate = days.bottom(1)[0].date;
var maxDate = days.top(1)[0].date;

var lineValues = days.group().reduce(function (acc, cur) {
  acc[cur.line] = (acc[cur.line] || 0) + 1
  return acc;
}, function (acc, cur) {
  acc[cur.line] = (acc[cur.line] || 0) - 1
  return acc;
}, function () {
  return {};
});

var personChart = dc.lineChart("#graph");
personChart
  .turnOnControls(true)
  .width(600).height(350)
  .dimension(days)
  .group(lineValues, "completed")
        .valueAccessor(function (d) {
            return d.value.completed || 0;
        })
        .stack(lineValues, "assigned", function (d) {
            return d.value.assigned || 0;
        })
        .stack(lineValues, "inactive", function (d) {
            return d.value.inactive || 0;
        })
        .stack(lineValues, "active", function (d) {
            return d.value.active || 0;
        })
        .stack(lineValues, "new", function (d) {
            return d.value.new || 0;
        })
        .stack(lineValues, "temp", function (d) {
            return d.value.temp || 0;
        })
        .elasticY(true)
  .renderArea(true)
  .x(d3.time.scale().domain([minDate, maxDate]))
  .ordinalColors(colorScale)
  .legend(dc.legend().x(50).y(10).itemHeight(13).gap(5).horizontal(true));
dc.renderAll();

在此处提示

到目前为止，它运行良好，但是我遇到了障碍.我需要实现一个选项，以按单个堆栈过滤图表.在dc.js中可以吗?如果需要，我可以修改和重写整个代码，也可以要求我的客户以其他方式对数据进行重塑.我为其他图表过滤了数据中的其他字段，因此保留该功能很重要.

It is working fine so far, but I reached an obstacle. I need to implement an option to filter the chart by individual stacks. Is this possible in dc.js? I can modify and rewrite the entire code if necessary as well as ask my client to remodel the data differently, if needed. There are other fields in the data that I filter on for other charts so preserving that functionality is important.

推荐答案

根据设计，dc.js具有很多泄漏抽象"，因此通常有一种获取所需数据并自定义行为的方法通过下拉至d3，即使该功能不是库所期望的.

By design, dc.js has a lot of "leaky abstractions", so there is usually a way to get at the data you want, and customize the behavior by dropping down to d3, even if it's functionality that wasn't anticipated by the library.

使用饼图的解决方法非常合理，但我同意单击图例会更好.

Your workaround of using a pie chart is pretty reasonable, but I agree that clicking on the legend would be better.

这是做到这一点的一种方法:

Here's one way to do that:

var categories = data.dimension(function (d) {
  return d.line;
});
personChart
  .on('renderlet', function(chart) {
    chart.selectAll('.dc-legend-item')
    .on('click', function(d) {
      categories.filter(d.name);
      dc.redrawAll();
    })
  });

基本上，图表绘制完成后，我们选择图例项目并替换我们自己的点击行为，该行为将针对我们为此目的创建的另一个维度进行过滤.

Basically, once the chart is done drawing, we select the legend items and replace the click behavior which our own, which filters on another dimension we've created for the purpose.

这确实依赖于图例的文本与要过滤的值匹配.如果这与您的实际用例不匹配，则可能必须在图例及其图表之间自定义未记录的接口 .legendables().

This does rely on the text of the legend matching the value you want to filter on. You might have to customize the undocumented interface .legendables() between the legend and its chart, if this doesn't match your actual use case, but it works here.

您的小提琴分叉演示了此功能: https://jsfiddle.net/gordonwoodhull/gqj00v27/8/

This fork of your fiddle demonstrates the functionality: https://jsfiddle.net/gordonwoodhull/gqj00v27/8/

我还添加了一个饼图，以说明正在发生的事情.您可以通过饼图通过图例来设置图例过滤器

I've also added a pie chart just to illustrate what is going on. You can have the legend filter via the pie chart by doing

  catPie.filter(d.name);

代替

  categories.filter(d.name);

这样，您可以在饼图的切片中看到生成的过滤器.您还可以获得切换行为，即能够再次单击以返回到空选择，然后单击多个类别.如果需要切换行为，请发表评论，我尝试提出一种无需使用饼图即可添加该行为的方法.

This way you can see the resulting filter in the slices of the pie. You also can get the toggle behavior of being able to click a second time to go back to the null selection, and clicking on multiple categories. Leave a comment if the toggle behavior is desired and I try to come up with a way to add that without using the pie chart.

有时候，图例似乎应该是其自己的独立图表类型...

Sometimes it seems like the legend should be its own independent chart type...

这篇关于如何在dc.js中按堆栈过滤堆积的折线图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！