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容器，但它不是仅在其中创建相应的键对象的图像，而是向我显示每个数组。

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


     }
    }
  }

d3.js和多维数组

1 个答案: