1

配列から 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>
4

1 に答える 1

1

難しい作業はすべて完了しました。後は最後の数行を調整するだけです。images 変数にバインドしたデータを使用する必要があるので、これを試してください。

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-19T21:20:45.770 に答える