Fatal编程技术网

Javascript 数组中的SVG元素

javascript html css svg d3.js

Javascript 数组中的SVG元素,javascript,html,css,svg,d3.js,Javascript,Html,Css,Svg,D3.js,我试图将图像从数组加载到svg画布中，但我无法使此代码正常工作 我正在尝试用Chrome调试它，但我不能。图像是空白的，我不知道如何继续 <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> <style type="text/css"> body { backgro

我试图将图像从数组加载到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>


身体{
背景图像：url（'BG.png'）
}
拖放
window.onload=函数（）{
变量NumImages=[
{'x'：200，'y'：90，'width'：450，'height'：200，'href'：'numbers.jpeg'}，
];
变量circleData=[
{“cx”：20，“cy”：20，“半径”：20，“颜色”：“绿色”}，
{“cx”：70，“cy”：70，“半径”：20，“颜色”：“紫色”}]；
变量矩形数据=[
{“rx”：110，“ry”：110，“高度”：30，“宽度”：30，“颜色”：“蓝色”}，
{“rx”：160，“ry”：160，“高度”：30，“宽度”：30，“颜色”：“红色”}]；
var svgContainer=d3.select（“body”）.append（“svg”）
.attr（“宽度”，700）
.attr（“高度”，700）
.attr（“利润率顶部”，100）；
var images=svgContainer.selectAll（“图像”）
.数据（数字图像）
.输入（）
.附加（“图像”）；
svgContainer.append（“图像”）
.attr（'x'，200）
.attr（'y'，90）
.attr（'宽度'，50）
.attr（'height'，200）
.attr（“xlink:href”，“2-image.jpg”）；
};
您已经完成了所有艰苦的工作，只需调整最后几行即可。您需要使用绑定到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; });
你已经做了所有艰苦的工作，你只需要调整最后几行。您需要使用绑定到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; });
网上有很多，页面上有介绍，页面左侧有更多教程的链接。显然，迈克·博斯托克的教程值得一看，斯科特·默里的教程总是能得到很好的评价。还有一个关于谷歌群组的讨论，值得一看。有很多在线讨论。页面上有介绍，页面左侧有更多教程的链接。显然，迈克·博斯托克的教程值得一看，斯科特·默里的教程总是能得到很好的评价。还有一个关于谷歌集团的讨论值得一看