当用户动态添加图表时，Dc.js图表​​交互失败。请参阅说明以获取更多详细信息

Question

我正在寻找一种方法，通过用户选择调色板中的图表，将Dc.js图表​​添加到仪表板中。 一天结束，我希望用户能够做两件事。

第1部分：用户应该能够通过选择相应的目标变量（x，y字段）从图表调色板中选择各种图表并将其添加到仪表板中，这些变量只是csv中的字段，每个图表一个接一个。登记/> 第2部分：构成仪表板的这些图表应该是反应性的或交互式的（在一个图表中的变化反映所有其他图表的变化），现在情况并非如此。

我已经通过以下代码实现了第一部分，但主要的挑战是第二部分。图表不再是协调的可视化（通过在一个图表中更改饼图，其他图表不反映更改）

我已将1个函数中的所有图表添加到switch case语句中。一切正常，可以将图表添加到仪表板或相应的div，但这不会使图表被激活（点击一个图表不会影响其他图表）。

关于以下代码及其意图的一点注意事项。

- 我正在动态创建div并分配ID。

- 我函数中的数字是在调用函数中分配的随机数，以确保没有重复的具有相同id的div。

-Targetvar是用户选择的字段。

-arrayofobject是实际数据。

-ctype是用户选择的图表类型。我已经声明了2个图表（饼图和行图）。它们是调色板中的更多图表供用户选择。

请让我知道我需要做出哪些改变才能使图表被反应。

function charts_all(targetvar1,arrayOfObject,num,ctype){
        var selname="#divid"+num;

        switch(ctype){
        case "pie":

            var SevPieChart=dc.pieChart(selname);
            data=arrayOfObject;

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

            var targetvariable1=targetvar1;

            var SevDim = ndx.dimension(function(d){ return d[targetvariable1]; })
            ;

            var Sevgroup=SevDim.group();
            SevPieChart
                .height(400)
                .width(1200)//1200
                .radius(150)
                .innerRadius(20)
                .dimension(SevDim)
                .group(Sevgroup)
                .transitionDuration(1000)
                .legend(dc.legend().x(950).y(40)) //LEGEND CODE x=950
                .externalLabels(0)
                .renderLabel(true)
                .label(function(d) { return d.key +" (" + Math.floor(d.value / all.value() * 100) + "%)"; })
                .title(function(d){return d.Sevgroup;});
                //dc.renderAll();
                alldefault();
            break;

        case "row":

            var Rowchart = dc.rowChart(selname);

            data=arrayOfObject;


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


            var targetvariable1=targetvar1;

            var SaDim = ndx.dimension(function(d){ return d[targetvariable1]; })
            ; 
            var SAgroup=SaDim.group();


            Rowchart
                .width(1000)
                  .height(1000)
                 .dimension(SaDim)
                 .group(SAgroup)
                 .renderLabel(true)
                 .label(function(d) { return d.key+" (" + Math.floor(d.value / all.value() * 100) + "%)"; })
                 .data(function(group){ return group.top(40);})  ;        
                 //Rowchart.filter = function() {};

                //dc.renderAll();
                alldefault();

            break;

        default:


        }
        dc.renderAll();
}