Question

所以，我使用https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter9/pie-chart.html

更新了功能正常但不优雅的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;
}

当我使用时：

var chart = doughnutChart("#chart").data(data);
chart.render()

我得到一张漂亮的图表。但更新不起作用：

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

主要问题是：

如何更新此图表？我不确定如何将更新的数据导入图表。尽管数据变量正在更新，但再次呼叫render()并不会更新数据，而且我似乎无法传递新数据。本书的示例似乎没有出现此问题，作为无问题的测试。

Answer 1

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

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);

然后它会正确更新。

D3进入退出更新和饼图

1 个答案: