Skip to content

Instantly share code, notes, and snippets.

@cjrd

cjrd/example.js

Last active December 24, 2015 22:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cjrd/6875471 to your computer and use it in GitHub Desktop.
Save cjrd/6875471 to your computer and use it in GitHub Desktop.
Download ZIP
A simple test to check when d3 calls enter and update functions.
Raw
example.js
(function(d3){
// full screen
var docEl = document.documentElement,
bodyEl = document.getElementsByTagName('body')[0];
var width = window.innerWidth || docEl.clientWidth || bodyEl.clientWidth,
height = window.innerHeight|| docEl.clientHeight|| bodyEl.clientHeight;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var data = [5, 6, 7];
var newCt = 0,
updateCt = 0;
for (var i=0; i < 10; i++){
var circles = svg.selectAll("circle");
circles = circles.data(data);
// handle updates
circles.attr("r", function(d){
return Math.pow(d, 2);
})
.attr("cx",
function(d){
updateCt++;
return d*50;
})
.attr("cy", function(d){ return Math.pow(d,2); })
.attr("fill", "red");
// handle new elements
circles.enter()
.append("circle")
.attr("r", function(d){
newCt++;
return d*5;
})
.attr("cx",
function(d){
return d*50;
})
.attr("cy", function(d){
return Math.pow(d,2);
})
.attr("fill", "red");
// remove old elements
}
console.log("number of function calls for enter() elements: " + newCt)
console.log("number of function calls for update elements: " + updateCt)
// handle window resizing
function updateWindow(){
var x = window.innerWidth || docEl.clientWidth || bodyEl.clientWidth;
var y = window.innerHeight|| docEl.clientHeight|| bodyEl.clientHeight;
svg.attr("width", x).attr("height", y);
}
window.onresize = updateWindow;
})(window.d3);
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>D3 Example</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="style" src="style.css">
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="example.js"> </script>
</body>
</html>
Raw
style.css
body{
margin: 0;
padding: 0;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment