d3에서 다각형과 패스의 위치 설정

Question

내가 읽고 싶은 여러 개의 외부 SVG 파일이 있습니다. SVG 파일 중 일부는 다각형이고 다른 파일은 경로입니다. 대부분의 경우, 파일을 읽을 때 파일을 번역 할 임의의 양을 구체적으로 지정합니다. 그러나 두 가지 모양에 대한 위치를 구체적으로 지정하고 싶습니다. (JSFiddle).

var width = 300, height = 300; 
var sampleSVG = d3.select("body") 
    .append("svg") 
    .attr({width: width, height: height}); 

var shapes = [ 
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-01.svg", number: 1, color: 'red'}, 
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-02.svg", number: 2, color: 'yellow'}, 
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-03.svg", number: 3, color: 'orange'}, 
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-04.svg", number: 4, color: 'green'}, 
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-05.svg", number: 5, color: 'blue'}, 
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-06.svg", number: 6, color: 'purple'}, 
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-07.svg", number: 7, color: 'red'}, 
{url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-08.svg", number: 8, color: 'orange'}]; 

var q = queue(); 
shapes.forEach(function(shape) { 
    q.defer(d3.xml, shape.url, "image/svg+xml"); 
}); 

q.awaitAll(function (error, results) { 
    sampleSVG.selectAll('g.shape').data(shapes) 
    // g tag is created for positioning the shape at random location 
    .enter().append('g').attr('class', 'shape') 
     .attr('transform', function() { 
     return 'translate(' + Math.random() * (w - 50) + ',' + Math.random() * (h - 50) + ')' 
    }) 
     .each(function (d, i) { 
     // the loaded svg file is then appended inside the g tag 
     this.appendChild(results[i].documentElement); 
     d3.select(this).select('svg').select("*") 
     .attr("stroke", function() {return d.color;}) 
     .attr('transform', function() { 
      if (d.number > 6) { 
       var newX = 200, 
        newY = 200; 

       //This is where I want to set the position 
       return 'scale(0.3) translate(0,0)'} 

      else {return 'scale(0.1)'} 

     ;}) 
    }) 
}); 

는 기본적으로, 모양은 내가 (200200)에 표시 할 두 가지 형태 (d.number > 6있는 사람)을 제외하고 다른 임의의 위치를 ​​갖고 싶어.

translate을 재설정 한 다음 새로운 양으로 다시 실행하거나 특별히 경로와 다각형의 위치를 ​​설정하는 방법이 있습니까?

Answer 1

아직 불분명하지만, 나는 이것이 당신이 찾고있는 무엇을 생각 :

q.awaitAll(function (error, results) { 
    sampleSVG.selectAll('g.shape') 
    .data(shapes) 
    .enter() 
    .append('g') 
     .attr('class', 'shape') 
     .each(function (d, i) { 
     // the loaded svg file is then appended inside the g tag 
     this.appendChild(results[i].documentElement); 

     d3.select(this).select('svg').select("*") 
      .attr("stroke", d.color); 
     }) 
     .attr('transform', function (d, i) { 
     // In general, in here we're setting the transform of a <g>, which contains an svg. So: 
     if (d.number > 6) { 
      var newX = 200, 
       newY = 200; 

      // What you return here will scale and translate the <g> (and the svg inside it) 
      return 'scale(0.3) translate(0,0)'; 
     } 
     else { 
      return 'translate(' + Math.random() * (w - 50) + ',' + Math.random() * (h - 50) + ') scale(0.1)'; 
     } 
     }); 
});