Question

我实现了在d3上编写饼图的代码，饼图的值根据您以html形式选择的数据而变化。我没有设法更新饼图上的标签，该文本堆积在上一个饼图的文本上。

我试图在文本上使用.remove（）函数来创建自己的函数，但是它不起作用。

        var width = 450
            height = 450
            margin = 40;

        var radius = Math.min(width, height) / 2 - margin;

            var svg = d3.select("#pie")
              .append("svg")
                .attr("width", '600px')
                .attr("height", '450px')
              .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

            var data1 = {a :{{pourcentage[0]}}, b : 100-{{pourcentage[0]}}}
            var data2 = {a :{{pourcentage[1]}}, b : 100-{{pourcentage[1]}}}
            var data3 = {a :{{pourcentage[2]}}, b : 100-{{pourcentage[2]}}}
            var data4 = {a :{{pourcentage[3]}}, b : 100-{{pourcentage[3]}}}
            var data5 = {a :{{pourcentage[4]}}, b : 100-{{pourcentage[4]}}}
            var data6 = {a :{{pourcentage[5]}}, b : 100-{{pourcentage[5]}}}
            var data7 = {a :{{pourcentage[6]}}, b : 100-{{pourcentage[6]}}}
            var data8 = {a :{{pourcentage[7]}}, b : 100-{{pourcentage[7]}}}
            var data9 = {a :{{pourcentage[8]}}, b : 100-{{pourcentage[8]}}}
            var data10 = {a :{{pourcentage[9]}}, b : 100-{{pourcentage[9]}}}
            var data11 = {a :{{pourcentage[10]}}, b : 100-{{pourcentage[10]}}}
            var data12 = {a :{{pourcentage[11]}}, b : 100-{{pourcentage[11]}}}
            var data13 = {a :{{pourcentage[12]}}, b : 100-{{pourcentage[12]}}}
            var data14 = {a :{{pourcentage[13]}}, b : 100-{{pourcentage[13]}}}
            var data15 = {a :{{pourcentage[14]}}, b : 100-{{pourcentage[14]}}}
            var data16 = {a :{{pourcentage[15]}}, b : 100-{{pourcentage[15]}}}

            var color = d3.scaleOrdinal()
                .domain(["a","b"])
                .range(d3.schemeCategory10);

        function update(data) {

            var pie = d3.pie()
                .value(function(d) {return d.value; })
                .sort(function(a, b) { console.log(a) ; return d3.ascending(a.key, b.key);} )
            var data_ready = pie(d3.entries(data))

            var u = svg.selectAll("path")
                .data(data_ready)

            var arcGenerator= d3.arc()
                .innerRadius(0)
                .outerRadius(radius);

            u
                .enter()
                .append('path')
                .merge(u)
                .transition()
                .duration(1000)
                .attr('d',arcGenerator)
                .attr('fill', function(d){ return(color(d.data.key)) })
                .attr("stroke", "white")
                .style("stroke-width", "2px")
                .style("opacity", 1);
            var cv_text = svg.selectAll("MySlices")
                .data(data_ready)
                .enter()
                .append('text')
                .text(function(d){ return d.data.value+"%"})
                .attr("transform", function(d) { return "translate(" + arcGenerator.centroid(d) + ")";  })
                .style("font-size", 15);


            cv_text.exit().remove();

            u
              .exit()
              .remove();
        }

        update(data1)

当我选择显示另一个饼图时，我只希望标签更新，而实际上我已经叠加了标签。预先感谢您的帮助。

如何更新d3饼图中的标签？

0 个答案: