D3.js 理解enter（）和exit（）_D3.js

D3.js 理解enter（）和exit（）

d3.js

D3.js 理解enter（）和exit（）,d3.js,D3.js,根据我对D3中enter函数的理解，此代码运行后div的内容如下： <body> <div> <p class="x"></p> </div> <script> d3.select('div') .selectAll('p') .data([3, 4]) /** * if

根据我对D3中enter函数的理解，此代码运行后div的内容如下：

<body>
    <div>
        <p class="x"></p>
    </div>
    <script>
        d3.select('div')
            .selectAll('p')
            .data([3, 4])
            /**
             * if I uncomment this it works 
             * but I don't want to call the
             * same function twice
             */
            // .text(d => d + '')
            .enter()
            .append('p')
            .text(d => d + '');
    </script>
</body>

应该是：

    <div>
        <p class="x">3</p>
        <p>4</p>
    </div>

但是我得到了

    <div>
        <p class="x"></p>
        <p>4</p>
    </div>

我错过了什么？根据我的理解，3应该应用于第一个p，4应该应用于enter函数之后的附加p

2另外，我也不太明白退出。删除东西，据我所知，它应该删除附加的p，但它不知道它有什么好处？

当您执行此操作时：

d3.select('div')
    .selectAll('p')

您正在选择所选div中的所有元素。您只有一个div不重要，因为select会选择它得到的第一个div。。。而且里面只有一个元素

然后，绑定数据：

.data([3, 4])

迄今为止，我们已经：

选择中的1个元素数据中的2个数据点现在是关于enter选择的重要部分：您的选择中已经有一个元素。该元素获得第一个基准，3。剩余的基准将附加到新创建的p元素，即4

输入选择包含所有数据点，但没有相应的元素。如您所见，由于选择中有1个元素和2个数据点，因此enter选择只有1个元素。让我们看看控制台：

var enterSelection=d3。选择“div” .选择All'p' .数据[3,4] 进来 .附加“p” .textd=>d；输入选择中的console.logElements:+enterSelection.nodes.length