dc.js 使用带有点击事件的新组函数重绘图表

Question

我正在尝试使用新组重新绘制 dc.js 图表，当其他图表库单击时 event.But 它不会重新绘制。

这是我的 javascript 代码：

 var donemChart = dc.rowChart('div#donem'),
        hospitalTypeChart = dc.rowChart('div#hospital_type'),
        ckysHospitalClassChart = dc.rowChart('div#ckys_hospital_class'),
        ckysHospitalTypeChart = dc.rowChart('div#ckys_hospital_type'),
        hospitalHealthRegionChart = dc.rowChart('div#hospital_health_region'),
        hospitalRoleChart = dc.rowChart('div#hospital_role'),
        hospitalsChart = dc.rowChart('div#hospitals');




    d3.json('tsim.json',function(data){

        var ndx = crossfilter(data);
        var all = ndx.groupAll();




        //define crossfilter dimensions

        var donemDim = ndx.dimension(function(d){ return d.DONEM}),
                hospitalTypeDim = ndx.dimension(function(d){ return d.KURUM_TURU}),
                ckysHospitalClassDim = ndx.dimension(function(d){ return d.CKYS_KURUM_TURU}),
                ckysHospitalTypeDim = ndx.dimension(function(d){ return d.CKYS_KURUM_TIPI}),
                hospitalHealthRegionDim = ndx.dimension(function(d){ return d.SAGLIK_BOLGESI}),
                hospitalRoleDim = ndx.dimension(function(d){ return d.HASTANE_ROL}),
                hospitalsDim = ndx.dimension(function(d){return d.HASTANE}) ;

        var donemGroup = donemDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
            hospitalTypeGroup = hospitalTypeDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
            ckysHospitalClassGroup = ckysHospitalClassDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
            ckysHospitalTypeGroup = ckysHospitalTypeDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
            hospitalRoleGroup = hospitalRoleDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
            hospitalsGroup = hospitalsDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
            hospitalHealthRegionGroup = hospitalHealthRegionDim.group().reduceSum(function(d){return d.toplam_muayene_say});







        donemChart
                .width(400)
                .height(300)
                .margins({top: 0, left: 0, right: 0, bottom: 0})
                .group(donemGroup)
                .dimension(donemDim)
                .ordinalColors(['#E89F00'])
                .label(function (d) {
                    return d.key;
                })

                .title(function (d) {
                    return "";
                })
                .ordering(function(d) { return -d.value; })
                .valueAccessor(function(p) { return p.value; })
                .elasticX(true)
                .xAxis().tickFormat();

        hospitalTypeChart
                .width(400)
                .height(300)
                .margins({top: 0, left: 0, right: 0, bottom: 0})
                .group(hospitalTypeGroup)
                .dimension(hospitalTypeDim)
                .ordinalColors(['#E89F00'])
                .label(function (d) {
                    return d.key;
                })

                .title(function (d) {
                    return d.value;
                })
                .ordering(function(d) { return -d.value; })
                .valueAccessor(function(p) { return p.value; })
                .elasticX(true)
                .xAxis().tickFormat();

        ckysHospitalClassChart
                .width(400)
                .height(300)
                .margins({top: 0, left: 0, right: 0, bottom: 0})
                .group(ckysHospitalClassGroup)
                .dimension(ckysHospitalClassDim)
                .ordinalColors(['#E89F00'])
                .label(function (d) {
                    return d.key;
                })

                .title(function (d) {
                    return "";
                })
                .ordering(function(d) { return -d.value; })
                .valueAccessor(function(p) { return p.value; })
                .elasticX(true)
                .xAxis().tickFormat();

        ckysHospitalTypeChart
                .width(400)
                .height(500)
                .margins({top: 0, left: 0, right: 0, bottom: 0})
                .group(ckysHospitalTypeGroup)
                .dimension(ckysHospitalTypeDim)
                .ordinalColors(['#E89F00'])
                .label(function (d) {
                    return d.key;
                })

                .title(function (d) {
                    return "";
                })
                .ordering(function(d) { return -d.value; })
                .valueAccessor(function(p) { return p.value; })
                .elasticX(true)
                .xAxis().tickFormat();


        hospitalHealthRegionChart
                .width(400)
                .height(500)
                .margins({top: 0, left: 0, right: 0, bottom: 0})
                .group(hospitalHealthRegionGroup)
                .dimension(hospitalHealthRegionGroup)
                .ordinalColors(['#E89F00'])
                .label(function (d) {
                    return d.key;
                })

                .title(function (d) {
                    return "";
                })
                .ordering(function(d) { return -d.value; })
                .valueAccessor(function(p) { return p.value; })
                .elasticX(true)
                .xAxis().tickFormat();

        hospitalRoleChart
                .width(400)
                .height(500)
                .margins({top: 0, left: 0, right: 0, bottom: 0})
                .group(hospitalRoleGroup)
                .dimension(hospitalRoleDim)
                .ordinalColors(['#E89F00'])
                .label(function (d) {
                    return d.key;
                })

                .title(function (d) {
                    return "";
                })
                .ordering(function(d) { return -d.value; })
                .valueAccessor(function(p) { return p.value; })
                .elasticX(true)
                .xAxis().tickFormat();


        hospitalsChart
                .width(1000)
                .height(25000)
                .margins({top: 0, left: 0, right: 0, bottom: 0})
                .group(hospitalsGroup)
                .dimension(hospitalsDim)
                .ordinalColors(['#E89F00'])
                .label(function (d) {
                    return d.key;
                })

                .title(function (d) {
                    return "";
                })
                .ordering(function(d) { return -d.value; })
                .valueAccessor(function(p) { return p.value; })
                .elasticX(true)
                .xAxis().tickFormat();

        chart.addListener("clickGraphItem", function(event){

            if(event.item.dataContext.d_type==1){

                var donemGroup = donemDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
                        hospitalTypeGroup = hospitalTypeDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
                        ckysHospitalClassGroup = ckysHospitalClassDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
                        ckysHospitalTypeGroup = ckysHospitalTypeDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
                        hospitalRoleGroup = hospitalRoleDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
                        hospitalsGroup = hospitalsDim.group().reduceSum(function(d){return d.toplam_muayene_say}),
                        hospitalHealthRegionGroup = hospitalHealthRegionDim.group().reduceSum(function(d){return d.toplam_muayene_say});

                dc.redrawAll();



            }else if(event.item.dataContext.d_type==2){

                var donemGroup = donemDim.group().reduceSum(function(d){return d.toplam_A_grubu_ameliyat_say}),
                        hospitalTypeGroup = hospitalTypeDim.group().reduceSum(function(d){return d.toplam_A_grubu_ameliyat_say}),
                        ckysHospitalClassGroup = ckysHospitalClassDim.group().reduceSum(function(d){return d.toplam_A_grubu_ameliyat_say}),
                        ckysHospitalTypeGroup = ckysHospitalTypeDim.group().reduceSum(function(d){return d.toplam_A_grubu_ameliyat_say}),
                        hospitalRoleGroup = hospitalRoleDim.group().reduceSum(function(d){return d.toplam_A_grubu_ameliyat_say}),
                        hospitalsGroup = hospitalsDim.group().reduceSum(function(d){return d.toplam_A_grubu_ameliyat_say}),
                        hospitalHealthRegionGroup = hospitalHealthRegionDim.group().reduceSum(function(d){return d.toplam_A_grubu_ameliyat_say});


                dc.redrawAll();
            }





            dc.redrawAll();


        });








        dc.renderAll();






    });

当我在图表侦听器中检查数据类型后单击图表时，我正在获取数据类型 function.And 我正在使用新的维度对维度进行分组 group.When 它是 consol 记录的新组显示，但它不影响重新绘制图表。

这个问题我该怎么办？我们如何解决这个问题？

谢谢

Answer 1

您刚刚将 hospitalTypeGroup 变量的引用（例如）重新分配给了另一个对象。但是图表仍然保留对旧对象的引用。您必须使用 hospitalTypeChart.group(hospitalTypeGroup) 重置 hospitalTypeChart 上的组，然后重新渲染。（我认为在很多情况下重绘在这里都不起作用。）

Answer 2

您需要提醒 dc.js 更改的组。

只是创建同名的新维度和组并不会替换它们。您还需要为每个图表适当地调用 .group()。

此外，我不建议每次单击某些内容时都创建新的组（或维度）。 Crossfilter 会随着每个新组而变慢，因为它们都需要响应每个过滤器操作。相反，提前创建组并将它们应用到点击处理程序中。

dc.js 使用带有点击事件的新组函数重绘图表

dc.js chart redrawing with new group function with click event

javascript

jquery

d3.js

crossfilter

dc.js