帶有angular指令的d3js-每次單擊都將添加新圖形，而不是重新繪制或更新數據

Question

在單擊用戶的angularjs指令中，我正在更改新圖紙的數據。 但是圖形根本沒有改變..如何解決此問題。

這是我的代碼：

link : function ( scope, element, attr ) {


            $timeout(function () {

                var phrase = scope.contractor.Type;

                scope.$watch("contractor.ActualPercentage", function ( newValue, oldvalue ) {

                    var phraseValue = [newValue, 100-newValue];
                    drawPie( phraseValue, phrase );



            function drawPie (array, phrase) {


                var width = element.width(), height = element.height(),
                radius = Math.min(width, height) / 1.2, data = array;

                if(!data.length) return;

                var color = d3.scale.ordinal()
                    .domain(data)
                    .range(["#ffff00", "#1ebfc5"]);

                var arc = d3.svg.arc()
                    .outerRadius(radius - 90)
                    .innerRadius(radius - 85);

                var pie = d3.layout.pie()
                    .sort(null)
                    .value(function(d) { return d });

                var svg = d3.select("#pieGraph")
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


                 var g = svg.selectAll(".arc")
                      .data(pie(data))
                        .enter().append("g")
                        .attr("class", "arc");

                  g.append("path")
                      .attr("d", arc)
                      .style("fill", function(d,i) {  return color(d.data); });

                 g.append("text")
                     .text(data[0]+'%')
                     .attr("class", "designVal")
                     .style("text-anchor", "middle")


                 g.append("text")
                    .text(phrase)
                    .attr("transform", "translate(" + 0 + "," + 25 + ")")
                    .attr("class", "designPhrase")
                    .style("text-anchor", "middle")

                // svg.exit().remove(); not working.

            }

                })



            }, 1000)

        }

現場演示

Answer 1

問題是您每次單擊時都在添加項目，而您沒有刪除任何內容。

新增：

d3.select("#pieGraph svg").remove();

之前：

var svg = d3.select("#pieGraph") .append("svg") .attr("width", width)

單擊將正確交換圖形。 這是為您更新的plnkr： http ://plnkr.co/edit/jIiAq5VEzObkb6004DHG?p=preview

我將start defaultValue更改為0，並注釋了$ timeout。 我不確定您為什么要使用$ timeout，但是一旦刪除它，它仍然可以正常工作。