d3.js和多维数组

我有一个多维数组，其中的对象看起来像这个

 var nest = [
{key: 'VLan422', values:[[{Class:"VMWARE VIRTUAL PLATFORM",name: "pdb02"},{"Ip Adress": 'IP_1',ip4: '1.3242.3'},{name: 'VLan422'}], 
                        [{Class: "VMWARE VIRTUAL PLATFORM",name: "pxc07"},{"Ip Adress": 'IP_1',ip4: '21.35666.1'},{name: 'VLan422'}]]
},
{key: 'VLan33', values:[[{Class: "VMWARE VIRTUAL PLATFORM",name: "pew09"},{"Ip Adress": 'IP_1',ip4: '5.24232.6'},{name: 'VLan33'}], 
                        [{Class: "VMWARE VIRTUAL PLATFORM",name: "plk15"},{"Ip Adress": 'IP_1',ip4: '2.77888.9'},{name: 'VLan33'}]]}
];

我正在尝试创建

• 对于每个key，svg对象，在这种情况下，对于Vlan422和Vlan33
• 对于每个值块，一个图像svg，它应该在相应的svg键对象中

我的问题是，d3为我在两个svg对象中的两个键的每个值块创建一个图像，而不是只为对应键的每一个值块创建图像。

var div = d3.select("body")
    .append("div")
    .attr("width", "100%")
    .attr("height", "700");
var svg = div.selectAll("svg")
    .data(nest)
    .enter()
    .append("svg")
    .attr("width", "100%")
    .attr("height", "1500")
    .style("float", "left");
for(i=0;i<nest.length;i++){
    test = nest[i].values;
    var imgs = svg.selectAll("image")
        .data(test);
    imgs
        .enter()
        .append("svg:image")
        .attr("xlink:href", "http://www.clker.com/cliparts/1/4/5/a/1331068897296558865Sitting%20Racoon.svg")
        .attr("x", "40")
        .attr("y", function(d,i){console.log(d);console.log(i);var x = (i + 1) * 50; return (""+x+"");})
        .attr("width", "100")
        .attr("height", "100");
    imgs
        .exit()
        .remove();
}

这是我想要得到的结果

链接

我想要两个对象key一个svg容器，在它们内部，每个数组一个图像。我的代码创建了这两个svg容器，但它没有只创建其中相应的键的图像，而是显示了每个数组。

例如，在我的第一个svg中，我得到了四个图像，而不是两个

• pdb02、pxc07、pew09、plk15

在我的第二个svg中，我得到了相同的结果，而不是

• 第09页，第15页

我已经通过使用g元素解决了我的问题

          var cmargin = 30;
          var cheight = 60;
          var cwidth = 40;

          var svg=d3.select("body").append("svg")
                  .attr("width", "100%")
                  .attr("height", "100%");

          var container=svg.selectAll("g")
                  .data(nest)
                  .enter()
                  .append("g")
                  .attr("transform",function(d,i) {return "translate("+(100*i)+",0)";});
              container
                  .append("rect")
                  .attr("x",cmargin)
                  .attr("y",cmargin)
                  .attr("width",cwidth-2*cmargin)
                  .attr("height",cheight-2*cmargin)

              container
                  .append("text")
                  .attr("y",cheight+10)
                  .attr("x",cmargin)
                  .text(function(d) {return d.key;});
              container.selectAll("image")
                  .data(function(d) {return d.values}) 
                  .enter()
                  .append("svg:image")
                  .attr("xlink:href", "http://www.clker.com/cliparts/1/4/5/a/1331068897296558865Sitting%20Racoon.svg")
                  .attr("x", "40")
                  .attr("y", function(d,i){console.log(d);console.log(i);var x = (i + 1) * 50; return (""+x+"");})
                  .attr("width", "100")
                  .attr("height", "100");