SVG element from an array

Question

I am trying to load images into a svg canvas from an array and I am not able to make this code work.

I am trying to debug it with Chrome and I am not able to. The image is blank and I don't know how to proceed.

<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
body {
                background-image:url('BG.png')
     }
</style>
<title>Drag And Drop</title>
</head>
<body>
<script type="text/javascript">

    window.onload = function(){
    var NumImages = [
                { 'x' :200, 'y':90, 'width': 450, 'height':200, 'href' : 'numbers.jpeg'  },
];
var circleData = [
   { "cx": 20, "cy": 20, "radius": 20, "color" : "green" },
   { "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }];


 var rectangleData = [
   { "rx": 110, "ry": 110, "height": 30, "width": 30, "color" : "blue" },
   { "rx": 160, "ry": 160, "height": 30, "width": 30, "color" : "red" }];

    var svgContainer = d3.select("body").append("svg")
                                                .attr("width",700)
                                                .attr("height",700)
                                                .attr("margin-top", 100);


    var images = svgContainer.selectAll("image")
        .data(NumImages)
        .enter()
        .append("image");

    svgContainer.append("image")
        .attr('x',200)
        .attr('y',90)
        .attr('width', 50)
        .attr('height', 200)    
        .attr("xlink:href", "2-image.jpg");
    };

</script>

</body>
</html>

user1614080 · Accepted Answer · 2013-10-19 21:20:45Z

1

You've done all the hard work, you just need to adjust the last couple of lines. You need to use the data that you've bound to the images variable so try this;

images
    .attr('x', function (d,i) { return d.x; })
    .attr('y', function (d,i) { return d.y; })
    .attr('width', function (d,i) { return d.width; })
    .attr('height', function (d,i) { return d.height; })    
    .attr("xlink:href", function (d,i) { return d.href; });

answered Oct 19, 2013 at 21:20

user1614080

2,8942 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1614080 Over a year ago

There a quite a few online there's the intro on the D3 page and there's a link to more tutorials on the left hand side of the page. Obviously the tutorials by Mike Bostock are worth looking and Scott Murray's tutorials always tutorials always get a good review. There's also a discussion on google groups that worth looking at here

Collectives™ on Stack Overflow

SVG element from an array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related