一個數組的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元素

回答

相關問題