我如何交叉过滤 2 dc.js SeriesChart？

如何解决我如何交叉过滤 2 dc.js SeriesChart？

我是使用 dc.js 创建可视化的新手，我希望创建 2 dc 系列图表，其中通过单击第一个图表过滤第二个图表。第二个系列图（学校图）应显示该大学的不同学校，例如根据所选大学的工程学院（大学图）。目前，我无法点击大学图表进行过滤，我不知道我哪里出错了。
这是 js-fiddle 的链接：https://jsfiddle.net/vfp7bdat/1/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Document</title>
    <!-- d3 cdn -->
    <script src="https://d3js.org/d3.v6.js"></script>
    <script src="https://d3js.org/d3-dsv.v1.min.js"></script>
    <!-- crossfilter cdn -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"
      integrity="sha512-nlO6OGj6wb0uu/thpSry7qFal63hfhCLExpWxYomYB3tBznqWmKggsDHNHSLjnVaoade9tv/rErN498NSzwBnA=="
      crossorigin="anonymous"
    ></script>
    <!-- dc cdn -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.2.3/dc.js"
      integrity="sha512-uIQEG7zDRB1dlmHnSs8pw8Mz3kiC1qdOxGnJyeTFNcYJIl60ITabMIxk3MQyzYx+7SfJitz3FVp6ySUwHPzwSQ=="
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/dc/4.2.3/style/dc.css"
      integrity="sha512-ZCK4qcVpG4m3G6VG2CWs5Tl870Xn9xhT3SWJLmbsbTfU9/hzyZDeCzyLpjsCc27YxlDi19URyKlY+h4cQIifig=="
      crossorigin="anonymous"
    />
    <!-- reductio cdn -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/reductio/1.0.0/reductio.js"
      integrity="sha512-NGAPJvYQee6VfMDfMRjqWxzcKHXuk1mrEqlc+D8VumYz00Kn9a0/fRMk8zoyRA+QZXRJJQFNOuyh+h1gJc49Yg=="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="uni">
      <strong>University</strong>
      <span class="reset" style="display: none"
        >Selected: <span class="filter"></span
      ></span>
      <a
        class="reset"
        href="javascript:uniChart.filterAll();dc.redrawAll();"
        style="display: none"
        >reset
      </a>
      <div class="clearfix"></div>
    </div>

    <div id="school">
      <strong>School</strong>
      <span class="reset" style="display: none"
        >Selected: <span class="filter"></span
      ></span>
      <a
        class="reset"
        href="javascript:schoolChart.filterAll();dc.redrawAll();"
        style="display: none"
        >reset
      </a>
      <div class="clearfix"></div>
    </div>

    <script>
      var uniChart = new dc.SeriesChart("#uni");
      var schoolChart = new dc.SeriesChart("#school");

      var data = d3
        .csv("cleaned_graduate-employment-survey-ntu-nus-sit-smu-suss-sutd.csv")
        .then(function (data) {
            // remove na value
            data = data.filter(function(d){
                if (isNaN(d["employment_rate_overall"])){
                    return false
                }
                d["employment_rate_overall"] = parseFloat(d["employment_rate_overall"]);
                return true
            })
          var ndx = crossfilter(data);
          // var all = ndx.groupAll();


          var uniDim = ndx.dimension(function (d) {
            return [d.university,d.year];
          });   
          var schoolDim = ndx.dimension(function(d){
            return [d.school,d.year];
          })
          var test = ndx.dimension(function(d){
            return d.university;
          })


          var yearDim = ndx.dimension(function (d) {
            return d.year;
          });
          var minDate = new Date(yearDim.bottom(1)[0].year);
          var maxDate = new Date(yearDim.top(1)[0].year);
          
          // group by employment rate
          var uniGroup = uniDim.group();
          var schoolGroup = schoolDim.group();

          var empRateReducer = reductio()
            .avg(function (d) {
              return parseFloat(d["employment_rate_overall"]);
            });
          empRateReducer(uniGroup);
          empRateReducer(schoolGroup);
          
          console.log(schoolGroup.all());

          uniChart
            .width(900)
            .height(500)
            .chart(function(c) { return new dc.LineChart(c).curve(d3.curveCardinal).renderDataPoints({radius: 5,fillOpacity: 0.8,strokeOpacity: 0.0}); })
            .x(d3.scaleTime().domain([minDate,maxDate]))
            .y(d3.scaleLinear().domain([80,100]))
            .brushOn(false)
            .yAxisLabel("Employment Rate (%)")
            .xAxisLabel("Year")
            .elasticX(true) 
            .elasticY(false)
            .dimension(uniDim)
            .group(uniGroup)
            .clipPadding(10)
            .mouseZoomable(false)
            .seriesAccessor(function(d) {return d.key[0];})
            .keyAccessor(function(d) {return new Date (d.key[1]);})
            .valueAccessor(function(d) {return +d.value.avg;})
            .legend(dc.legend().x(500).y(320).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(700));
          uniChart.yAxis().tickFormat(function(d) {return `${d}%`;});
          uniChart.margins().left += 40;

          schoolChart
            .width(900)
            .height(500)
            .dimension(schoolDim)
            .group(schoolGroup)
            .elasticX(true)
            .elasticY(false)
            .brushOn(false)
            .yAxisLabel("Employment Rate (%)")
            .xAxisLabel("Year")
            .clipPadding(10)
            .x(d3.scaleTime().domain([minDate,100]))
            .chart(function(c) { return new dc.LineChart(c).curve(d3.curveCardinal).renderDataPoints({radius: 5,strokeOpacity: 0.0});; })
            .seriesAccessor(function(d) {return d.key[0];})
            .keyAccessor(function(d) {return new Date (d.key[1]);})
            .valueAccessor(function(d) {return d.value.avg;})
            .legend(dc.legend().x(500).y(320).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(700))
            //  .data(function (group) {
            //      return group.top(10);
            //    });

          dc.renderAll();
        });
    </script>
  </body>
</html>
我如何交叉过滤 2 dc.js SeriesChart？

如何解决我如何交叉过滤 2 dc.js SeriesChart？

相关推荐
