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)

        }

Live Demo

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

我将启动defaultValue更改为0并注释掉$ timeout。我不确定你为什么使用$ timeout，但是一旦删除它仍然没有问题。

带有角度指令的d3js - 每次点击都会附加新图形，而不是重新绘制或更新数据

1 个答案: