如何更新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));
})
});
答案 0 :(得分: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