d3 크기 조정 창에서 SVG 생성 크기 조정 내 차트 데이터가 잘못 이동합니다

Question

5 개의 div 요소를 포함하여 5 개의 svg가 있습니다. 그들의 아이디의 수치와 프로그램 생성됩니다

<div id="svg-container-total"></div> 
<div id="svg-container-3"></div> 
<div id="svg-container-6"></div> 
<div id="svg-container-12"></div> 
<div id="svg-container-24"></div> 

나는이 모든 때문에 폭을 정의 #의 SVG-컨테이너 전체를 사용 괜찮은지 것에 유의하십시오, 범위, 규모를 정의하는 몇 가지 변수와 사용 techan.js를 만들 svg가 똑같이 생성됩니다

//defining misc variables 
var margin = {top: 20, right: 60, bottom: 80, left: 60}, 
    width = parseInt(d3.select('#svg-container-total').style('width'),10) - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

//Defining chart scale 
var x = techan.scale.financetime() 
    .range([0, width]); 

var y = d3.scale.linear() 
    .range([height, 0]); 

//initializing chart data function 
var close = techan.plot.close() 
    .xScale(x) 
    .yScale(y); 

그런 다음 루프를 입력하여 모든 SVG를 만듭니다. 내 데이터는 가격 데이터 일뿐입니다.

// INSERT SVG (IN THE LOOP NOW) 
var svg = d3.select("#svg-container-"+frequency).append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var accessor = close.accessor(); 

x.domain(data.map(accessor.d)); 
y.domain(techan.scale.plot.ohlc(data,accessor).domain()); 

svg.append("g") 
    .datum(data) 
    .attr("class", "performance_"+frequency) 
    .call(close); 

지금까지는 그렇게 좋았습니다. 결과는 다음과 같습니다. 아래 5 개의 그래프가 5 개의 개별 행에 있습니다.

지금은 크기 조정 기능을 정의 (주파수 배열이 다른 SVG 용기를 통해 루프 날 수 있습니다) 창 크기 조정을 수신 :

이

function resize() { 
    //Find new window dimensions 
    width = parseInt(d3.select('#svg-container-total').style('width'), 10); 
    width = width - margin.left - margin.right; 

    //Update range of scale with new width 
    x.range([0, width]); 

    for (var i = 0; i<frequencies.length; i++) { 
     //Update chart contents 
     d3.select("#svg-container-"+frequencies[i]+" svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom); 

     d3.selectAll(".performance_"+frequencies[i]) 
      .call(close); 
    } 
} 

그러나 내 결과 지금과 같은 형태 :

실제 데이터 포인트를 제외하고 모든 것이 올바르게 크기가 조정 된 것처럼 보입니다. 데이터 포인트가 항상 일정량만큼 수직으로 이동하는 것처럼 보입니다. 각 그래프는 다른 양만큼 수직으로 이동하는 것으로 보이지만, 새로 고침을 클릭하고 창 크기를 다시 조정할 때마다 일관성이 유지됩니다.

var close = techan.plot.close() 

하지만 수직으로 데이터를 이동 이유를 모르겠어요 :

나는 문제가 여러 SVG의이 같은 변수에 접근 관련이있다 생각합니다. 또한 모든 그래프의 높이와 너비가 같기 때문에 루프 내에서 "닫기"를 여러 번 액세스하는 것이 문제가 될 것이라고 생각하지 않습니다.

그래프를 하나만 렌더링 할 때이 문제가 OCCUR이 아니기 때문에 이런 식으로 생각했습니다.

아이디어가 있으십니까?

참조 : http://bl.ocks.org/andredumas/af8674d57980790137a0

Answer 1

1.after :

var svg = d3.select("#svg-container-"+frequency).append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

삽입 : 코드 및 삽입에

var defs = svg.append("defs"); 
    defs.append("clipPath").attr('id','clip-path'+frequency) 
    .append('rect').attr('width',width + margin.left + margin.right) 
    .attr('height',height + margin.top + margin.bottom); 

2.find :

.attr('clip-path','url(#clip-path'+frequency')') 

예 (의 내 코드) :

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .attr("viewBox", "0 0 "+width+" "+ height) 
    .attr("preserveAspectRatio", "xMinYMax none") 
    .attr("xml:space","preserve") 
    .attr("shape-rendering","optimizeSpeed") 
    .attr("id", "chart1") 
    .append("g") 
    .attr("transform", "translate(" + padding.left + "," + padding.top + ")") 
    .attr("id", "layers") 
    .on("click", dvevent) 
    .call(d3.zoom() 
     .duration(-1) 
     .extent([[0, 0], [width, height]]) 
     .translateExtent([[0, 0], [width, height]]) 
     .scaleExtent([1, 20]) 
     .on("zoom", zoomed)); 

    var defs = svg.append("defs"); defs.append("clipPath").attr('id','clip-path').append('rect').attr('width',width).attr('height',height); 

var layer = svg.selectAll(".layer") 
    .data(layers) 
    .enter().append("g") 
    .attr("class", "layer") 
    .attr('clip-path','url(#clip-path)') 

...skipped... 

var rect = layer.selectAll("rect") 
    .data(function(d) {return d.filter(function(d,i) { ...skipped... })}) 
    .enter().append("rect") 

...skipped...