Skip to content

Instantly share code, notes, and snippets.

@mfrazie2
Last active June 16, 2017 21:34
Show Gist options
  • Save mfrazie2/ecbdfb5b4d9b7cdc251259f126bf3891 to your computer and use it in GitHub Desktop.
Save mfrazie2/ecbdfb5b4d9b7cdc251259f126bf3891 to your computer and use it in GitHub Desktop.
Enter-Append
license: mit
<!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; }
svg { width: 100%;}
</style>
</head>
<body>
<svg></svg>
<script>
const data = [100,120,53,74,95, 42, 87, 35, 150];
const rectWidth = 40,
height = 150;
const svg = d3.select('svg');
const enter = svg.selectAll('rect')
.data(data)
.enter().append('rect')
.attr('x', (d,i) => i * rectWidth)
.attr('y', d => height - d)
.attr('width', rectWidth)
.attr('height', d => d)
.attr('fill', 'blue')
.attr('stroke', 'white');
console.log(enter.nodes());
console.log(enter.data());
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment