关于d3.js 写法的困惑

Question

看《D3数据可视化手册》时，我发现了类似于这样的函数。

function renderData(data) {
        // enter
        d3.select('body')
            .selectAll('div.bar')
            .data(data)
            .enter()
            .append('div')
            .attr('class', 'bar')
            .append('span');

        // update
        d3.select('body')
            .selectAll('div.bar')
            .data(data)
            .style('height', function(d) {
                return d * 3 + 'px';
            })
            .style('margin-top', function(d) {
                return maxHeight - d * 3 + 'px';
            })
            .select('span')
            .text(function(d) {
                return d;
            });

        // exit
        d3.select('body')
            .selectAll('div.bar')
            .data(data)
            .exit()
            .remove();
    }

我在想，这段代码重复了三遍, 为什么不第一遍进来就把这段代码的返回值保存到一个变量里面呢？

 d3.select('body')
            .selectAll('div.bar')
            .data(data)

类似于这种：

function renderData(data) {
        var d = d3.select('body')
            .selectAll('div.bar')
            .data(data);
            
        // enter
            d.enter()
            .append('div')
            .attr('class', 'bar')
            .append('span');

        // update
            d.style('height', function(d) {
                return d * 3 + 'px';
            })
            .style('margin-top', function(d) {
                return maxHeight - d * 3 + 'px';
            })
            .select('span')
            .text(function(d) {
                return d;
            });

        // exit
            d.exit()
            .remove();
    }

我在学习的时候也发现这两种写法有时候会导致不同的结果， 请问这是为什么呢？

Answer 1

估计是选择器的链式调用中有“破坏性”操作，没有return this
d3定义选择集对象的更深层次的目的是封装数据驱动能力。通过data() 操作符，d3使数据化可视化工作者能够以一种声明式的方式指定处理流水线，从而 简化从数据到文档的处理过程：
和style()这样的操作符不同，data()操作符能够改变选择集的内容。 当选择集流过style()环节后，选择集的内容并没有变化，变化的是选择集中 各个DOM对象的属性。然而，当一个选择集流过data()环节后，将获得一个不同的选择集： 所包含的DOM对象发生了变化。
可以看看链式调用