Question

我正在尝试创建一种简单的方法来创建和更新应用程序中的圆环图（以及其他图表，以后）。这是建立在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的新手：）

提前感谢您的帮助。

Answer 1

所以，如果你想在每次更新图表时在一个可能的新DOM元素下创建一个新的SVG，那么我对你的更新调用的签名并不清楚。此外，我不确定您是否使用单词transition来指定数据更改的D3转换（尽管这很容易添加）。无论如何，只需简单地调整代码即可完成所需的操作FIDDLE。

function updateDonutChart(data, options) {...

如何动态更新D3图表

1 个答案: