Learn D3.js

Merging selections

There is a better way to do it! That's what the merge() method is for. If you merge the selections before updating, you can perform the updates once. This eliminates code duplication, and better, you can get rid of the entire draw() method, since now redraw() can be used to create any new nodes and to update existing nodes.

Here is the fixed code without duplication using merge and a single redraw() function. The following code lists the entire <script> block (omitting some details), showing the places where the redraw() function is called (see GUP/8-enter-append-merge.html):

<script>    const datasets = ["one", "two", "three", "four"];    const colors = ["red", "blue", "green", "purple"];    let idx = 0;  d3.select("form") // button ...