Question

例如，如果我有以下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，我将如何重新创建相同的lineCharts。

感谢。

Answer 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

撰写折线图。

Answer 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条目设置笔触颜色（这将来自我们在reduce步骤中使用的键 - 类别）。不要忘记使用parseInt()将csv数据转换为数字。

dc.js - 基于单个csv文件中的单独类别的多个lineChart

2 个答案: