dc.js - 基于单个 csv 文件中不同类别的多个 lineChart答案

【问题标题】：dc.js - multiple lineChart based on separate categories in single csv filedc.js - 基于单个 csv 文件中不同类别的多个 lineChart
【发布时间】：2015-01-08 21:15:38
【问题描述】：

例如，如果我有以下 csv 文件：

category, number, total A,1,3 A,2,5 A,3,1 B,1,4 B,2,6 B,3,1 C,1,5 C,2,2 C,3,4

我能够按照以下示例将数据分离到不同的 csv 文件中并组成每个文件。

github link

但是，我想知道如果我只有一个 csv 文件并按每个分组类别分隔每个 lineChart，我将如何重新创建相同的 lineChart。

谢谢。

【问题讨论】：

标签： javascript d3.js linechart dc.js crossfilter

【解决方案1】：

@minikomi 的回答是直接的 d3 方法。

执行此操作的 dc.js/crossfilter 方法（如果您希望图表减少每个键的值并与其他 dc 图表交互/过滤）是减少单个组中的多个值，如下所示：

var group = dimension.group().reduce(
    function(p, v) { // add
        p[v.type] = (p[v.type] || 0) + v.value;
        return p;
    },
    function(p, v) { // remove
        p[v.type] -= v.value;
        return p;
    },
    function() { // initial
        return {};
});

https://github.com/dc-js/dc.js/wiki/FAQ#rows-contain-a-single-value-but-a-different-value-per-row

然后您可以通过将组与访问器一起传递给.group 方法来指定每个折线图，如下所示：

lineChartA.group(group, 'A', function(a) { return x.A; })
lineChartB.group(group, 'B', function(a) { return x.B; })

如果您想将折线图组合成一个图表，您可以使用composite chart 或series chart 组合它们

【讨论】：

【解决方案2】：

你可以reduce数据给出3个不同的数组，每个数组只包含每个类别的数据：

var grouped = data.reduce(function(o,d) {
  if(o[d.category]) {
    o[d.category].push(d);
  } else {
    o[d.category] = [d];
  }
  return o;
}, {});

通常在 d3 中我们使用数据数组，所以我会使用 d3.map 将其转换为键/值对数组

var lineData = d3.map(grouped).entries()

现在，您可以使用它来创建线条（省略创建比例 x 和 y）、svg 元素等：

var line = d3.svg.line()
             .x(function(d){return x(d.number)})
             .y(function(d){return y(d.total)})

var linesGroup = svg.append("g")

var lines = linesGroup.data(lineData).enter()
                      .append("line")
                      .attr("d", function(d){return line(d.value)})

您还可以使用d.key 为 d3.map 条目设置描边颜色（这将来自我们在减少步骤中使用的键 - 类别）。不要忘记使用parseInt() 将您的 csv 数据转换为数字。

【讨论】：