d3.js和多维数组

Question

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

 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对象（在本例中为2）对于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();
}

---

这就是我想要得到的结果

链接

我想要对象键既是svg容器，又是其中的对象，对于每个数组都需要一个图像。 我的代码创建了这两个svg容器，但是它不仅向我显示了每个数组，而且还没有在其中创建相应键对象的图像。

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

• pdb02，pxc07，pew09，plk15

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

• pew09，plk15

---

我已经通过使用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"); 

Answer 1

要将数组的每个值作为svg对象，您需要获取数组的每个值并将其添加到svg.data（test）。您可以按以下方式获取测试值。

 for(i=0;i<nest.length;i++){
   for(j=0;j<nest[i].values.length;j++){
     for(k=0;k<nest[0].values[0].length;k++){
      test = nest[i].values[j][k].Number;//will get each object value.

       console.log(test);
       var imgs = svg.selectAll("image")
       .data(test);
       rest of the code here......


     }
    }
  }