dc.js 控件选择的散点图过滤维度

Question

我正在尝试过滤散点图上的维度和通过控件（select 框）呈现的图，但我无法使其正常工作。也许我在想，因为维度 returns 是一个数组 [key, value, value] 并且我正在尝试使用控件中的文本值进行过滤。

<div id="chart-scatter"></div>
<select id="selection">
  <option value="BranchA">Branch A</option>
  <option value="BranchB">Branch B</option>
  <option value="BranchC">Branch C</option>
  <option value="BranchD">Branch D</option>
</select>

var transactions = [
  {
    accountType: 9,
    amount: 284,
    serviceName: "BranchE"
  },
  {
    accountType: 7,
    amount: 716,
    serviceName: "BranchE"
  },
  {
    accountType: 5,
    amount: 899,
    serviceName: "BranchD"
  },
  {
    accountType: 8,
    amount: 781,
    serviceName: "BranchD"
  },
  {
    accountType: 5,
    amount: 295,
    serviceName: "BranchA"
  },
  {
    accountType: 9,
    amount: 770,
    serviceName: "BranchB"
  },
  {
    accountType: 9,
    amount: 195,
    serviceName: "BranchE"
  },
  {
    accountType: 5,
    amount: 335,
    serviceName: "BranchF"
  },
  {
    accountType: 10,
    amount: 74,
    serviceName: "BranchF"
  },
  {
    accountType: 10,
    amount: 223,
    serviceName: "BranchC"
  },
  {
    accountType: 5,
    amount: 290,
    serviceName: "BranchD"
  },
  {
    accountType: 10,
    amount: 485,
    serviceName: "BranchA"
  },
  {
    accountType: 7,
    amount: 364,
    serviceName: "BranchE"
  },
  {
    accountType: 9,
    amount: 509,
    serviceName: "BranchB"
  },
  {
    accountType: 8,
    amount: 74,
    serviceName: "BranchC"
  },
  {
    accountType: 9,
    amount: 442,
    serviceName: "BranchE"
  }
];

filter = crossfilter(transactions);
dim = filter.dimension(function(d) {
  return [d.accountType, d.amount, d.serviceName];
});
grp = dim.group();
scatterChart = dc.scatterPlot("#chart-scatter");
scatterChart
  .width(380)
  .height(200)
  .margins({
    top: 10,
    right: 20,
    bottom: 30,
    left: 40
  })
  .dimension(dim)
  .group(grp)
  .x(d3.scale.linear().domain([4., 11.]))
  .y(d3.scale.linear().domain([0., 1000.]))
  .renderHorizontalGridLines(true)
  .renderVerticalGridLines(true)
  .symbolSize(30)
  .highlightedSize(8)
  .colorAccessor(function(d) {
    return d.key[2];
  })
  .colors(d3.scale.ordinal()
    .domain(['BranchA', 'BranchB', 'BranchC','BranchD','BranchE', 'BranchF'])
    .range(["#fa3701", "#339933", "#bbbbbb","#aaaaaa","#999999","#888888"])
  );

  d3.select("#selection").on('change', function(){

       dim.filter($("#selection").val()) 
       scatterChart.redraw();
       dc.redrawAll();
  })

dc.renderAll();

从示例中我发现这似乎是不同地方的方法，但是 none 实际上是我可以找到的散点图，我想知道 dim = array[= 会有什么区别13=]

JSFiddle

Answer 1

一个组不观察其自身维度的过滤器 (https://github.com/crossfilter/crossfilter/wiki/Crossfilter-Gotchas#a-group-does-not-observe-its-dimensions-filters)。因为您是在定义组的同一维度上过滤，所以过滤器对组没有影响。

为服务名称定义第二个维度并放置默认过滤器：

serviceDim = filter.dimension(function(d) {
    return "" + d.serviceName;
})
serviceDim.filter('BranchA')

然后按如下方式更新您的更改函数：

d3.select("#selection").on('change', function(){
     serviceDim.filter($("#selection").val())
     //scatterChart.redraw();
     dc.redrawAll();
})

这是一个更新的 JSFiddle：https://jsfiddle.net/esjewett/uhvh23b0/

dc.js 控件选择的散点图过滤维度

dc.js scatter plot filtering dimension from selection of control

crossfilter

dc.js