SVG элемент из массива

Question

SVG элемент из массива

0

Я пытаюсь загрузить изображения в холст 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>

surya 19 окт. 2013, в 23:10

Источник

Теги:

javascript

html

d3.js

css

svg

1 ответ

Ещё вопросы

user1614080 · Accepted Answer · 2013-10-19T19-43-00.000Z

Вы проделали всю тяжелую работу, вам просто нужно настроить последние пару строк. Вам необходимо использовать данные, привязанные к переменной изображений, поэтому попробуйте это;

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

Благодарю вас. Можете ли вы предложить какие-нибудь хорошие онлайн-уроки?
Есть немало онлайн, есть вступление на странице D3, и есть ссылка на другие учебники в левой части страницы. Очевидно, что учебники Майка Бостока заслуживают внимания, а учебники Скотта Мюррея всегда дают хороший обзор. Есть также обсуждение групп Google, которые стоит посмотреть здесь