block by Fil 4f937d85cbc10705bd1d7e7f45f4fcf2

.call(generalpattern)

Full Screen

Ease up the pain with the general update pattern in d3v4.

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    textarea {
      font-size: 14px;
      font-family: monospace;
      width: 100%;
      height: 90%;
      border: none;
      margin-left: 2em;
      padding-left: 2em;
      border-left: #fee solid 4px;
    }
  </style>
</head>

<body>

  <textarea>
function generalpattern(selection, cb) {
    var enter = selection.enter();
    if (cb.before) cb.before(selection);
    if (cb.enter) enter = cb.enter(enter);
    if (cb.exit) cb.exit(selection.exit());
    if (cb.update) cb.update(selection.merge(enter));
}

// USAGE
svg.selectAll('path').data([…])
    .call(generalupdate, {
            enter: function (g) {
                return g.append('path')
            },
            exit: function (g) {
                g
                    .transition()
                    .remove()
            },
            update: function (g) {
                g
                    .transition()
                    .attr('d', function (d) {})
            },
            // before: function(g) {…},
        }
    });</textarea>
</body>