Question

我正在玩d3.js中的饼图。我希望有几个图表同时工作，并且能够按类别选择一个或另一个。这个想法是有一个主图表，通过点击不同的区域，新的图表应该出现显示子类别。这段代码令我头疼：

        // myPie has been deffined previously as --> var myPie = d3.layout.pie();
        // dataPie is an array such as --> [2,3,1,2]
        // level2 is just an array of arrays containing the sub-sets of data I want to display in the pie-charts

        var myArcs = mySvg.selectAll("g")            
                        .data(myPie(dataPie))
                        .enter()
                        .append("g")
                        .attr("class","arc")
                        .attr("transform","translate(" + xCenter +"," + yCenter + ")" )

        // Appending other arcs
        for(i=0; i<allData.length; i++){
            var dataLabels_i = [];
            var dataPie_i = [];                
            for(j=0; j<level2[i].length; j++){
                dataLabels_i[j] = level2[i][j][0]
                dataPie_i[j] = level2[i][j][1]                    
            }
            var arcArray =[];  
            var rectArray =[];  

            arcArray[i] = mySvg.selectAll("g")
                            .data(myPie(dataPie_i))
                            .enter()
                            .append("g")
                            .attr("class","arc_"+i)
                            .attr("transform","translate(" + xCenter +"," + yCenter + ")" )
        }

第一个饼图很好地生成（稍后会绘制），但是我在for循环中生成的图表不会。我怀疑这与我在一个已经有一些“g”的svg中生成“g”的事实有关，所以存在某种冲突并且它们会覆盖？我尝试通过为每个图表分配不同的类来应对这种情况。有什么想法吗？

感谢大家！

Answer 1

正如Mark所说，在尝试为循环生成图表时，您应该使用更具体的选择器，而不是使用常规"arc_" + i选择器，例如<g>，如果这是您想要的不同类分配。

使用selectAll("g")选择器生成新图表的原因是，当您myPie(dataPie_i)并在循环中按g绑定数据时，d3将找到之前的{{1}从第一个饼图生成，因此enter()选择不会更新，在这种情况下它是空的，<g>将不会被追加。有关联接数据的更多详细信息，请参见here。

D3js。使用课程

1 个答案: