d3.js和多维数组

Question

I have a multidimensional array with objects that looks like this

 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'}]]}
];

I'm trying to create

• for every key a svg object, in this case 2, for Vlan422 and Vlan33 ,
• for every value block an image svg, which should be in the corresponding svg key object.

My problem is, that d3 creates an image for every value block of my two keys in both svg objects, instead of only an image for every value block of the corresponding key.

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

---

here's what I'm intended to get as result

Link

I want for both object key a svg container and inside of them, for every array an image. My code creates those two svg container, but instead of creating only images of the corresponding key Object inside of them, it shows me every array.

For example in my first svg, I get four images instead of two

• pdb02, pxc07, pew09, plk15

and in my second svg I get the same result instead of

• pew09, plk15

---

I've solved my problem by using the g element

  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

To get each value of array as svg object, you need to get each value of array and add it to svg.data(test).You can obtain test value as below.

 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......


     }
    }
  }