Question

我正在尝试过滤散点图上的维度和通过控件（选择框）呈现的图表，但我无法使其工作。也许我在想因为维度返回一个数组[键，值，值]，我试图使用控件中的文本值进行过滤。

<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();

从示例中我发现这似乎是在各个地方的方法，但是没有一个真的是我能找到的散点图，我想知道dim = array

的区别是什么

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散点图过滤尺寸来自控件的选择

1 个答案: