D3进入-退出-更新和饼图 [英] D3 enter-exit-update and pie charts

问题描述

因此，我一直在使用我的课看起来像这样:

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

我得到一个漂亮的图表.但是更新不起作用:

I get a nice chart rendered. But the update doesn't work:

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

主要问题是:

如何更新此图表?我不确定如何将更新的数据获取到图表中.尽管已更新数据变量，但再次调用render()不会更新数据，而且我似乎无法传递新数据.本书的示例似乎没有此问题，因为测试可以正常进行.

How do I update this chart? I'm not sure how to get updated data into the chart. Calling render() again does not update the data despite the data variable being updated, and I can't seem to pass new data in. The book's example doesn't appear to have this issue, as testing that works without issue.

推荐答案

这里的语法实际上存在一个简单的错误:

There is actually a simple error in syntax here:

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进入-退出-更新和饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！