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

---

这就是我想要得到的结果

Link

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

例如，在我的第一个 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......


     }
    }
  }