Javascript D3输入-退出更新和饼图

所以，我一直在用

我的班级是这样的：

function doughnutChart(selector_div) {
"use strict";
var _chart = {};

var _width = 200, _height = 200,
    _data = [],
    _svg, _bodyG, _pieG,
    _radius = 100,
    _inner_radius = 50;

_chart.render = function() {
    if (!_svg) {
        _svg = d3.select(selector_div).append("svg")
            .attr("height", _height)
            .attr("width", _width);
    }
    renderBody(_svg);
};

function renderBody(svg) {
    if (!_bodyG) {
        _bodyG = svg.append("g")
            .attr("class", "body");
    }
    renderDoughnut();
}

function renderDoughnut() {
    var pie = d3.layout.pie()
        .sort(function (d) {
            return d.id;
        })
        .value(function (d) {
            return d.count + d.abnormal;
        });

    var arc = d3.svg.arc()
        .outerRadius(_radius)
        .innerRadius(_inner_radius);

    if (!_pieG) {
        _pieG = _bodyG.append("g")
            .attr("class", "pie")
            .attr("transform", "translate("
                + _radius
                + ","
                + _radius + ")");
        }
        renderSlices(pie, arc);
        renderLabels(pie, arc);
    }
}

function renderSlices(pie, arc) {
    var slices = _pieG.selectAll("path.arc")
        .data(pie(_data));

    slices.enter()
        .append("path")
        .attr("class", "arc")
        .attr("fill", function(d) {
            return d.data.visualisation_colour;
        });

    slices.transition()
        .attrTween("d", function(d) {
            var currentArc = this.__current__;
            if (!currentArc) {
                currentArc = {startAngle: 0, endAngle: 0};
            }
            var interpolate = d3.interpolate(currentArc, d);
            this.__current__ = interpolate(1);
            return function(t) {
                return arc(interpolate(t));
            };
        });
}

function renderLabels() {
    _pieG.append("text")
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .attr("class", "inside")
        .text(function(d) {
            var total = 0;
            for (var j = 0; j < _data.length; j++) {
                total = total + _data[j].count + _data[j].abnormal;
            }
            return total;
        });
}

_chart.data = function(d) {
    if (!arguments.length) {
        return _data;
    }
    _data = d;
    return _chart;
};

return _chart;
}

我得到了一张很好的图表。但更新不起作用：

data = $.map(cell_types, function(key, value) {
    return key;
});
chart.render();

主要问题是：

---

如何更新此图表？我不知道如何将更新的数据输入图表。再次调用

render（）

不会更新数据，尽管数据变量正在更新，而且我似乎无法传入新数据。这本书的示例似乎没有这个问题，因为测试没有问题。

这里实际上有一个简单的语法错误：

if (!_pieG) {
    _pieG = _bodyG.append("g")
        .attr("class", "pie")
        .attr("transform", "translate("
            + _radius
            + ","
            + _radius + ")");
    renderSlices(pie, arc);
    renderLabels(pie, arc);
}

实际上应该是：

if (!_pieG) {
    _pieG = _bodyG.append("g")
        .attr("class", "pie")
        .attr("transform", "translate("
            + _radius
            + ","
            + _radius + ")");
}
renderSlices(pie, arc);
renderLabels(pie, arc);

---

然后它会正确地更新。

如果您查看

update

函数，您将看到在调用呈现图表之前数据是如何更新的：

function update（）{for（var j=0；j

谢谢，但是，当我修改上述内容以更新数据目录时，与其在

.data

中处理数据，它仍然不起作用（请参见编辑）

if (!_pieG) {
    _pieG = _bodyG.append("g")
        .attr("class", "pie")
        .attr("transform", "translate("
            + _radius
            + ","
            + _radius + ")");
}
renderSlices(pie, arc);
renderLabels(pie, arc);