如何动态更新D3图表
如何动态更新D3图表
提问于 2014-03-12 03:50:09
我正在尝试创建一种简单的方法来在应用程序中创建和更新圆环图(以及稍后的其他图表)。这是建立在D3之上的。
我已经创建了一个drawDonutChart，如下所示：
var data = [50, 50];
var dataTwo = [75, 25];
var options = {
colors: ["#0074D9", "#7FDBFF"],
};
function createDonutChart(data, height, width, domElement, options) {
var radius = Math.min(width, height);
var color = d3.scale.category20();
var donut = d3.layout.pie().sort(null);
var arc = d3.svg.arc()
.innerRadius(radius/4)
.outerRadius(radius/2);
var svg = d3.select(domElement).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path = svg.selectAll("path")
.data(donut(data))
.enter().append("path")
.attr("fill", function(d, i) {
if (options.colors == null || options.colors == "undefined") {
return color(i);
} else {
return options.colors[i];
}
}).attr("d", arc);
}
var donutChart = createDonutChart(data, 50, 50, ".slices", options);当你在页面中有一个时，这将在那里绘制一个甜甜圈图表。
我想写一个函数updateDonutChart(originalChart，newData)，传递它(donutChart，dataTwo)，并让它将这些数据转换到图表中，而不是旧数据。
我已经在D3网站上查看了多个示例，但我无法获得以这种方式工作的东西(您只需传递旧图表和新数据)。这可能很简单，我刚接触D3 :)
提前感谢你的帮助。
回答 1
Stack Overflow用户
发布于 2014-03-12 04:35:42
因此，根据update调用的签名，我不清楚您是否希望在每次更新图表时都在可能的新DOM元素下创建新的SVG。此外，我不确定您是否使用了转换这个词来指定数据中的一个D3转换(尽管添加起来很简单)。在任何情况下，您的代码的一个简单调整，以做您想要做的是在这个FIDDLE中。
function updateDonutChart(data, options) {...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22335180
复制相关文章
相似问题
腾讯云开发者
