The d3-cookbook-v2 from nickqizhu

a question about the enter-update-remove

hello, recently , I am reading the d3-cookbook, which is a wonderful book. However it used the d3 v3.
I try to fix it to d3 v4 to work well. Then I find the repo. It' s cool. But I learned a lot from my fix.

However, When I change the code about pie-chart.html in chapter9. If i don't change the code in A line and use the slices.enter()，it will not show the chart correctly(click update will work). I find your d3-cookbook-v2 works well with using the slices.enter(). I think that update can't use the var slices because the slices is the reference? I am a little confused about the use of var xxx = selection.data(data) ... xxx.enter()... xxx.transition()....

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pie Chart</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <script type="text/javascript" src="d3.js"></script>
</head>

<body>

<script type="text/javascript">
    function pieChart() {
        var _chart = {};

        var _width = 500, _height = 500,
                _data = [],
                _colors = d3.scaleOrdinal().range(d3.schemeCategory20),
                _svg,
                _bodyG,
                _pieG,
                _radius = 200,
                _innerRadius = 100;

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

            renderBody(_svg);
        };

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

            renderPie();
        }

        function renderPie() {
            var pie = d3.pie() 
                    .sort(function (d) {
                        return d.id;
                    })
                    .value(function (d) {
                        return d.value;
                    });

            var arc = d3.arc()
                    .outerRadius(_radius)
                    .innerRadius(_innerRadius);

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

            _pieG.selectAll("path.arc").data(pie(_data)) //-----------------> A
                    .enter()
                    .append("path")
                    .attr("class", "arc")
                    .attr("fill", function (d, i) {
                        return _colors(i);
                    });

            _pieG.selectAll("path.arc").data(pie(_data)) //-----------------> A
                    .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(pie, arc) {

            var labels = _pieG.selectAll("text.label")
                    .data(pie(_data)); 

            _pieG.selectAll("text.label")
                    .data(pie(_data)).enter()
                    .append("text")
                    .attr("class", "label");

            _pieG.selectAll("text.label")
                    .data(pie(_data))
                    .transition()
                    .attr("transform", function (d) {
                        return "translate("
                            + arc.centroid(d) + ")"; 
                    })
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .text(function (d) {
                        return d.data.id;
                    });
        }

        _chart.width = function (w) {
            if (!arguments.length) return _width;
            _width = w;
            return _chart;
        };

        _chart.height = function (h) {
            if (!arguments.length) return _height;
            _height = h;
            return _chart;
        };

        _chart.colors = function (c) {
            if (!arguments.length) return _colors;
            _colors = c;
            return _chart;
        };

        _chart.radius = function (r) {
            if (!arguments.length) return _radius;
            _radius = r;
            return _chart;
        };

        _chart.innerRadius = function (r) {
            if (!arguments.length) return _innerRadius;
            _innerRadius = r;
            return _chart;
        };

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

        return _chart;
    }

    function randomData() {
        return Math.random() * 9 + 1;
    }

    function update() {
        for (var j = 0; j < data.length; ++j)
            data[j].value = randomData();

        chart.render();
    }

    var numberOfDataPoint = 6,
            data = [];

    data = d3.range(numberOfDataPoint).map(function (i) {
        return {id: i, value: randomData()};
    });

    var chart = pieChart()
            .radius(200)
            .innerRadius(100)
            .data(data);
            
    chart.render();
</script>

<div class="control-group">
    <button onclick="update()">Update</button>
</div>

</body>

</html>

nickqizhu / d3-cookbook-v2 Goto Github PK

d3-cookbook-v2's People

Contributors

Stargazers

Watchers

Forkers

d3-cookbook-v2's Issues

a question about the enter-update-remove

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent