dc.js使用crossfilter将回归图表合并到现有的散点图中

2 回答

• 0

  包含example in dc.js会很棒，因为很多人都可以使用它 .

  也许我们可以在一起工作？我不知道数学，但这里有一个简单的方法来使用复合图表来显示从聚合组计算的数据线 .

  首先，这是复合图表，其中嵌入了旧的散点图：

  var composite = dc.compositeChart("#composite");
  composite   
      .width(600)
      .height(400)
      .margins({top: 20, right: 20, bottom: 20, left: 60})
      .dimension(scatterDimension)
      .group(scatterGroup)
    .compose([
    dc.scatterPlot(composite)
      .symbolSize(6)
      .highlightedSize(15)
      .brushOn(false)
      .excludedOpacity(0.5)
      .excludedSize(5)
      .renderHorizontalGridLines(true)
      .renderVerticalGridLines(true),
    dc.lineChart(composite)
    .group(regressionGroup(scatterGroup))
  ])
      .x(d3.scale.linear().domain([minY1Minus,maxY1Plus]))
      .y(d3.scale.linear().domain([minY2Minus,maxY2Plus]));
  

  请注意，我们将散射组提供给复合图和散点图 . 这只是因为复合图表需要一个组，即使它实际上并没有使用它 .

  我们还在复合材料中添加了折线图，该折线图使用基于散点图组的"fake group" .

  这个假团体特别假，但它应该足以让你开始 . 由于我今天没有时间学习数学，我只是假装第一个和最后一个点是回归：

  function regressionGroup(group) {
    return {
      all: function() {
        var _all = group.all();
        var first, last;
        for(var i=0; i < _all.length; ++i) {
          var key = _all[i].key;
          if(!isNaN(key[0]) && !isNaN(key[1])) {
            var kv = {key: key[0], value: key[1]};
            if(!first)
              first = kv;
            last = kv;
          }
        }
        return [first, last];
      }
    };
  }
  

  与所有虚假组一样，这个想法是在图表根据另一个组提出要求时（并且不久）计算一些类似于组的数据 . 这里的计算不是很有趣，因为你知道如何计算回归，我想要用实际计算替换 first 和 last 以及for循环;所有这一切都是检查有效点并保留它找到的第一个和最后一个 .

  有趣的是，散点图采用数据，其中键包含x和y坐标，但折线图获取数据，其中键为x，值为y . 这就是我们进行转型的原因 kv = {key: key[0], value: key[1]}

  这里小提琴：http://jsfiddle.net/gordonwoodhull/m8rhexoa/8/

  后记

  请注意，如果将回归指南放在域外the stack mixin is too aggressive about clipping points to the domain，则会遇到dc.js错误 . 在这种情况下，似乎有一个简单，丑陋的解决方法：告诉折线图它有一个序数x刻度，即使它没有：

  var composite = dc.compositeChart("#composite"),
    lineChart;
  composite   
      .width(600)
    // ...
    .compose([
    // ...
    lineChart = dc.lineChart(composite)
    .group(regressionGroup(scatterGroup))
  ])
  lineChart.isOrdinal = d3.functor(true);
  

  呸！但它的确有效！这个hack可能只适用于复合材料！

  http://jsfiddle.net/gordonwoodhull/5tpcxov1/3/

  回复于 2024-05-04T12:03:12+08:00
• 3

  我有一个功能齐全的回归示例 . 当我来到这里寻求帮助时，我正是这样做的，我找到了你的问题 . 它需要 regression.js （here） .

  这遵循戈登关于“虚假团体”的出色建议，这应该真正称为内联组，或直接组，甚至是即时组 . 这是我的：

  function myRegressionGroup(group, min, max, filter = false) {
    return {
      all: function() {
        var _all = group.all();
        var first, last;
        if(filter) reg = regression.linear(_all.filter(function(k,v) {if(k.key[0]) return k.key}).map((k,v) => k.key));
        else reg = regression.linear(_all.map((k,v) => k.key));
        first = reg.predict(min);
        last = reg.predict(max)
        return [{key:first[0], value: first[1]}, {key: last[0], value: last[1]}]
      }
    };
  }
  

  请注意，此函数需要一个交叉过滤器组以及x-scale中的 min 和 max . 由于您通常会为xScale计算这些值，因此只需在此处重复使用它们即可 . 这是因为函数使用极值与 predict 方法来计算回归线的两个点 .

  可选的 filter 数据管理器用于决定是否删除x上的空值 .

  @Gordon，如何在Examples of using dc.js中包含我的回归示例？

  回复于 2024-05-04T12:03:12+08:00