Question

如何创建多个图表来绘制一个维度，以便他们对放置在另一个图表上的过滤器做出反应。示例：http://bl.ocks.org/pbutler/9356548

<html>
<head>
     <link href="style.css" rel="stylesheet">
     <link href="dc.css" rel="stylesheet">
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="crossfilter.js"></script>
    <script src="dc.js"></script>
</head>
<body>
    <div id="chart1">
    </div>
    <div id="chart2">
    </div>
    <script>
        var data = [];
        for (var i = 0; i < 10; i++) {
            data.push({'val' : 'a'})
        }
        for (var i = 0; i < 15; i++) {
            data.push({'val' : 'b'})
        }

        var ndx = crossfilter(data);
        var all = ndx.groupAll();

        var val = ndx.dimension(function (d) { return d.val; });
        var valGroup = val.group()

        var chart1 = dc.pieChart("#chart1");
        var chart2 = dc.pieChart("#chart2");

        chart1.dimension(val)
          .group(valGroup);
        chart2.dimension(val)
        .group(valGroup);

        dc.renderAll();
    </script>
</body>
</html>

简而言之，在这个例子中，图表似乎互相忽略。

Answer 1

如果使用相同的属性创建第二个维度，则过滤将反映在各个图表中。

以下是一个示例：http://jsfiddle.net/djmartin_umich/nw8EV/。

// build charts
teamMemberChart
    .width(270)
    .height(220)
    .dimension(teamMemberDimension)
    .group(teamMemberGroup)
    .valueAccessor(function (d) {
    return d.value.projectCount;
})
    .elasticX(true);

teamMemberChart2
    .width(270)
    .height(220)
    .dimension(teamMemberDimension)
    .group(teamMemberGroup)
    .valueAccessor(function (d) {
    return d.value.projectCount;
})
    .elasticX(true);

teamMemberChart3
    .width(270)
    .height(220)
    .dimension(teamMemberDimension2)
    .group(teamMemberGroup2)
    .valueAccessor(function (d) {
    return d.value.projectCount;
})
    .elasticX(true);

前两个图表使用相同的维度 - 选择一个选项并不反映另一个选项。第三个图表在同一属性上使用不同的维度 - 在此图表上选择一个选项会更新其他两个图表。

Answer 2

似乎可以在这里找到答案：https://groups.google.com/forum/#!topic/dc-js-user-group/1nIScnbY0vs。有两种可能的方法，按照DJ Martin的建议添加另一个维度，或使用on（“click”，...）处理程序在第二个图表上调用过滤器。

dc.js：单个维度中的多个图形

2 个答案: