DC 图表的交叉过滤器无法正常工作

我是 DC 图的新手。我正在尝试使用静态数组显示特定区域的患者的饼图、条形图和行图。我使用的示例如下所示。问题是，当我从条形图中选择单个条形时，饼图和行图会更新，所选切片突出显示，其余部分呈灰色。但是当我选择另一个栏（现在有 2 个栏）作为过滤器时。饼图和行图突出显示最新幻灯片并删除上一张幻灯片。任何在这方面的帮助将不胜感激。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DC.js Crossfilter Dashboard</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.2.0/dc.min.css" />
</head>
<body>

<div id="chart-container">
  <div id="bar-chart"></div>
  <div id="row-chart"></div>
  <div id="pie-chart"></div>
</div>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.2.0/dc.min.js"></script>

<script>
  var myarr = [
    {site: 'New Haven', patients: 2000},
    {site: 'New York', patients: 5000},
    {site: 'Trenton', patients: 7000},
    {site: 'Philadelphia', patients: 3000},
    {site: 'Wilmington', patients: 1200}
  ];

  var ndx = crossfilter(myarr);

  var siteDim = ndx.dimension(function(d) { return d.site; });
  var patientsGroup = siteDim.group().reduceSum(function(d) { return d.patients; });

  var barChart = dc.barChart("#bar-chart");

  barChart
    .width(400)
    .height(200)
    .dimension(siteDim)
    .group(patientsGroup)
    .x(d3.scaleBand().domain(myarr.map(function(d) { return d.site; })))
    .xUnits(dc.units.ordinal)
    .barPadding(0.1);

  var rowChart = dc.rowChart("#row-chart");

  rowChart
    .width(400)
    .height(200)
    .dimension(siteDim)
    .group(patientsGroup);

  var pieChart = dc.pieChart("#pie-chart");

  pieChart
    .width(200)
    .height(200)
    .dimension(siteDim)
    .group(patientsGroup);

  dc.renderAll();

  var isFiltering = false;

  dc.chartRegistry.list().forEach(function(chart) {
    chart.on('filtered', function() {
      if (!isFiltering) {
        isFiltering = true;

        var filters = chart.filters();
        console.log('filters: ',filters)
        dc.chartRegistry.list().forEach(function(otherChart) {
          console.log(otherChart == chart)
          if (otherChart !== chart) {
            if (filters.length > 0) {
              console.log('has filters: ',filters)
              otherChart.filter([filters]);
            } else {
              console.log('has no filters: ',filters)
              otherChart.filterAll();
            }
          }
        });

        dc.redrawAll();

        isFiltering = false;
      }
    });
  });
</script>

</body>
</html>

0
投票

 dc.chartRegistry.list().forEach(function(chart) {
    chart.on('filtered', function() {
      if (!isFiltering) {
        isFiltering = true;

        var filters = chart.filters();
        dc.chartRegistry.list().forEach(function(otherChart) {
          console.log(otherChart == chart)
          if (otherChart !== chart) {
            if (filters.length > 0) {
              console.log('has filters: ',filters)
              otherChart.filter(null) //This resolved the issue
              otherChart.filter([filters]);
            } else {
              otherChart.filterAll();
            }
          }
        });

        dc.redrawAll();

        isFiltering = false;
      }
    });
  });

问题描述投票：0回答：1

1个回答

最新问题

DC 图表的交叉过滤器无法正常工作

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1