Skip to content

Instantly share code, notes, and snippets.

@guilhermesimoes
Last active August 14, 2017 14:51
Show Gist options
  • Save guilhermesimoes/821ca87fea7aa6f1786efbdceaba4781 to your computer and use it in GitHub Desktop.
Save guilhermesimoes/821ca87fea7aa6f1786efbdceaba4781 to your computer and use it in GitHub Desktop.
D3 V4 join & enter
license: gpl-3.0

The selection.data method has been changed slightly with respect to duplicate keys. In 3.x, if multiple data had the same key, the duplicate data would be ignored and not included in enter, update or exit; in 4.0 the duplicate data is always put in the enter selection. In both 3.x and 4.0, if multiple elements have the same key, the duplicate elements are put in the exit selection. Thus, 4.0’s behavior is now symmetric for enter and exit, and the general update pattern will now produce a DOM that matches the data even if there are duplicate keys.

reference

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.chart div {
display: inline-block;
margin: 5px;
padding: 5px;
border: 1px black solid;
}
</style>
<div class="chart"></div>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>
var data = ["A", "A", "A"];
var a = d3.select(".chart")
.selectAll("div")
.data(data, function(d) { return d; })
.enter().append("div")
.text(String);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment