Question

如何更新d3.js中现有图表的数据。我正在尝试，但我得到错误。

实际上，这是我对角度的要求。我有一个指令，我希望通过发送不同的函数调用方案来更新数据。

这是我的尝试：

$(function(){

  var data = [30, 70];
  var phrase = "Graphics";
  var datas = [
      [40,60],
      [85,15],
      [20,80]
    ]

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

  var drawPie = function (array, phrase, element, num) {

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


                if(!data.length) return;

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

                var arc = d3.svg.arc()
                    .outerRadius(radius - 10)
                    .innerRadius(radius - 5);


                var svg = d3.select(element[0]).append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .attr("id", function(d,i) {return 'pie'+num;})
                    .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("transform", "translate(" + 0 + "," + radius / 4 + ")")
                     .attr("class", "designVal")
                     .style("text-anchor", "middle")


            }

    drawPie( data, phrase, $('#first'), 1); 
    drawPie( data, phrase, $('#second'), 2);

    $('button').on('click', function() {

      var index = $(this).index();
      var array = datas[index]; //getting different array;
      d3.select('#pie2').selectAll("path").data(pie(array));

    })

});

Live Demo

Answer 1

您必须使用.attr设置新属性值（来自新加载的数据）。这里受影响的属性是路径（d）和文本 - 您只需要再次调用它们。路径需要arc - 您可以像以前一样构建（使用#second）。

    ...
    var element = $('#second')
    var width = element.width(), height = element.height()
    var radius = Math.min(width, height) / 2      
    var arc = d3.svg.arc()
        .outerRadius(radius - 10)
        .innerRadius(radius - 5);

    d3.select('#pie2').selectAll("path").data(pie(array)).attr("d", arc);
    d3.select('#pie2').selectAll("text").text(array[0]+'%');
})

Plunker - http://plnkr.co/edit/1HTW9OQV9Ow93p1bLcDT?p=preview

如何更新d3js - 图形数据而不重新附加`svg`元素

1 个答案: