时间戳

首页 > 解决方案 > DC.JC 复选框以转移组并重新渲染ALL

d3.js - DC.JC 复选框以转移组并重新渲染ALL

问题描述

我试图使条形图更具动态性，并添加一个底部，以更改一组 y group() 和另一组 .group().reduceSum() 中的图表组。这是 HTML

    <label  class="switch">
        <input type="checkbox" id="shift" onclick=" shift();">
        <span class="slider round"></span>
    </label>

这是功能

  if (document.getElementById("shift").checked == true) {
      
      dc.renderAll();
    } else {
      
      dc.renderAll();
    }
  }

这是 index.js

d3.csv('data2.csv').then(data =>{
    data.forEach(d => {
      d.indisp = +d.indisp  ;
    });
    var ndx = crossfilter(data);
    var all       = ndx.groupAll();
    var catdim    = ndx.dimension(function (d) {return d['cat'];})
    
    var catGroup1    = catdim.group();

    var catGroup    = catdim.group().reduceSum(function(d) {return d.indisp;});

   catChart
      .dimension(catdim)
      .group(catGroup)

我遇到的问题是，我不知道在哪里编写验证复选框是否被选中的函数，并同时移动 catGroup 和 catGroup1 并再次渲染。

标签： d3.jsdc.js

解决方案

推荐阅读