一个数组的SVG元素

我想从数组中加载图像到一个svg画布，我无法使这个代码工作。一个数组的SVG元素

我想用Chrome调试它，我无法。图像是空白的，我不知道如何继续。

<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>

来源

2013-10-19 surya

你已经完成了所有的努力工作，你只需要调整最后几行。你需要使用你绑定到图像变量的数据，所以试试这个;

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; });

来源

2013-10-19 21:20:45 user1614080

谢谢。你能建议任何优秀的在线教程吗？ – surya

有很多在线的D3 D3（http://d3js.org/）页面上有介绍，并且在页面的左侧有更多教程的链接。很明显，Mike Bostock的教程值得期待，Scott Murray的教程总是教程总是得到很好的回顾。还有一个值得关注的Google小组讨论（https://groups.google.com/forum/#!msg/d3-js/nyK7kuP14PY/uoGg1kq_Qw4J） – user1614080

一个数组的SVG元素

回答

相关问题