Issue
This one is a bit of a mystery to me. I'm following along some very basic d3 tutorials in an effort to embed d3 into an iPython notebook. I'm writing the file inside python and rendering it to an iframe. Because i'm doing it this way I can look at the file independently in my browser to ensure I'm not dealing with a specific iPython quirk. (I just wanted to give the background of where this is all coming from in case I missed some point).
The problem is, when I created a series of circles they all, including the main 'svg' render as 0px x 0px objects with no attributes. I'm looked at everything with the inspector and compared my completed python produced document with the tutorial version (that I can view in the browser fine) and all looks the same, but somehow the tutorial version works, and mine has no attributes.
I'm obviously missing some small detail, but I would appreciate another pair of eyes looking over this and seeing what I might be doing wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="http://mbostock.github.io/d3/talk/20111018/d3/d3.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var w = 500;
var h = 50;
var dataset = [25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circles.attr("cx", function(d, i) {
return (i * 50) + 25;
})
.attr("cy", h/2)
.attr("r", function(d) {
return d;
})
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", function(d) {
return d/2;
});
</script>
</body>
</html>
Oh and unfortunately I can't use another additional tool because of restrictions on my network. I have had good success with some d3 examples, just this one is failing to work for me. Thanks
Solution
The actual cause of this problem is unknown, however Stephen Thomas pointed out that I was using an old version of d3. Upon updating to the current version the problem went away. Even though the example code and my code used the same version, the example code worked and mine did not. Regardless, updating resolved the problem.
Thanks for the nudge towards the solution Stephan.
Answered By - Thatch
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.