하나의 SVG에있는 차트의 다중 컨테이너로 D3 확대/축소 동작

Question

현재 SVS에는 여러 개의 컨테이너 (예 : json 데이터의 그룹 수에 따라 렌더링 된 여러 개의 작은 svg)가있는 SVG가 하나 있습니다. json에 5 개의 데이터 그룹이있는 경우 5 개의 작은 다중 컨테이너가 하나의 외부 svg에 들어갑니다.

또한 컨테이너가 확대 된 경우 다른 컨테이너는 동일한 확대/축소 동작을 반영해야하며 동기화되어야합니다. 이것은 산점도 및 다중 선 차트에서 구현됩니다.

현재 문제는 여러 컨테이너가 원하는대로 렌더링되지만 문제가 확대 된 경우 마지막 컨테이너 만 올바른 것입니다. 다른 컨테이너에서 줌 기능을 호출 할 때 줌 동작이 올바르지 않습니다. 즉, 스 캐터 플롯 차트, 축척의 거품 및 축이 확대 또는 축소되지 않는 것으로 간주합니다.

1) 다른 컨테이너의 축 선택이 올바른 것으로 가정 할 때 축을 가져 와서 다른 컨테이너를 확대하는 방법은 무엇입니까?
2) 내가 확대 한 컨테이너에 관계없이 모든 컨테이너에서 확대/축소 동작을 어떻게 동기화합니까?

CODE :

d3.select(that.selector+" #svgContainer"+index) 
     .call(d3.behavior.zoom() 
     .x(that.xScale) 
     .y(that.yScale) 
     .scaleExtent([1, 10]) 
     .on("zoom", zoomed)); /*Attaching Zoom behavior to each container id '#svgContainer0','#svgContainer1',so on.*/ 

    function zoomed() { 
     that.zoomed_out = false; 
     that.k.isOrdinal(that.selector,"#"+this.id+" .x.axis",that.xScale); 
     isOrdinal(that.selector,"#"+this.id+" .x.grid",that.xScale); 
     isOrdinal(that.selector,"#"+this.id+" .y.axis",that.yScale); 
     isOrdinal(that.selector,"#"+this.id+" .y.grid",that.yScale); 

     that.optionalFeatures() 
      .plotCircle() 
      .label(); 
     d3.select(that.selector) 
      .selectAll(".dot") 
      .attr("r", function (d) { 
       return that.sizes(d.weight)*d3.event.scale; 
      }); 
    }; 

    function isOrdinal(svg,container,scale) { 
     var l = container.length; 
     var temp = container.substr((l-7),7); 
     if(temp === ".x.axis") {         
       d3.select(svg).select(container).call(makeXAxis(options,scale)); 
      } 
      else if(temp === ".y.axis") { 
       d3.select(svg).select(container).call(makeYAxis(options,scale)); 
      } 
    }; 

    function makeXAxis(options,xScale) { 
    var xaxis = d3.svg.axis() 
        .scale(xScale) 
        .ticks(options.axis.x.no_of_ticks) 
        .tickSize(options.axis.x.tickSize) 
        .outerTickSize(options.axis.x.outer_tick_size) 
        .tickPadding(options.axis.x.ticksPadding) 
        .orient(options.axis.x.orient); 
    return xaxis; 
}; 

    function makeYAxis(options,yScale) { 
    var yaxis = d3.svg.axis() 
        .scale(yScale) 
        .orient(options.axis.y.orient) 
        .ticks(options.axis.y.no_of_ticks) 
        .tickSize(options.axis.y.tickSize) 
        .outerTickSize(options.axis.y.outer_tick_size) 
        .tickPadding(options.axis.y.ticksPadding); 
    return yaxis; 
}; 

Answer 1

I 수도있을 너무 늦게하지만 문제는 여기에 내 걸릴 수 있습니다 :

는 기본적으로 각 .call(d3.behavior.zoom()...) 독립적이며, 마지막 하나는 이벤트가 발생 잡는다는. 나만의 이벤트를 만들고 미리 정의 된 줌 목록에 수동으로 재발송 해 보셨습니까?

.on("d3Zoom", function(){ //zoom1 //zoom2 //... })

또한, 대신에 svgContainer # + 인덱스 사용 클래스의 정규 표현식들을 수있는 ID를 통해 루핑 : 클래스 = svgContainer, ID = 인덱스. 이렇게하면 selectAll(".svgContainer").call(d3Zoom...) 수 있습니다. The way selections are implemented as joints, 독립적 인 확대/축소 문제에주의해야합니다 (selectAll은 하나의 확대/축소와 연관되는 반면 select의 반복은 여러 선택을 나타냄) 따라서 독립적 인 확대/축소 기능을 나타냅니다.

나는 그것이 누군가를 돕기를 바랍니다.