d3.js가있는 확대/축소 막대 그래프

Question

언제든지 확대/축소 할 수있는 시간 눈금 막대 그래프를 만들려고합니다. 내 x 축 (시간 눈금)에 대한 확대/축소 기능을 만들 수 있었지만 내 데이터 (이 경우 rects)는 내 축과 함께 확대/축소되지 않습니다.

다음은 내 그래프의 단순화 된 버전입니다. http://jsfiddle.net/gorkem/Mf457/5/embedded/result/ 본인의 x 축을 확대 할 수 있지만 막대는 확대되지 않습니다. 여기

및

는 jfiddle 링크입니다 : http://jsfiddle.net/gorkem/Mf457/6/

var y = d3.scale.linear().domain([0, max_val]).range([graph_height, 0]); 
var x = d3.time.scale().domain([minDate, maxDate]).range([0, graph_width]); 

var chart = d3.select(location).append("svg") 
    .attr("class", "chart") 
    .attr("width", graph_width+20) 
    .attr("height", graph_height+20) 
    .call(d3.behavior.zoom().x(x).scaleExtent([1, 8]).on("zoom", zoom)); 

var lines = chart.selectAll("line"); 

var lines_y = lines 
    .data(x.ticks(5)) 
    .enter().append("line") 
    .attr("x1", x) 
    .attr("x2", x) 
    .attr("y1", function (d) {return graph_height - 20 - d;}) 
    .attr("y2", graph_height) 
    .style("stroke", "#ccc"); 

var lines_x = lines 
     .data(y.ticks(10)) 
     .enter().append("line") 
     .attr("x1", 0) 
     .attr("x2", graph_width) 
     .attr("y1", y) 
     .attr("y2", y) 
     .style("stroke", "#ccc"); 

xAxis = d3.svg.axis().scale(x); 
yAxis = d3.svg.axis().scale(y).orient("left"); 

chart.append("svg:g") 
    .attr("class", "xaxis") 
    .attr("transform","translate(0,300)") 
    .call(xAxis); 
chart.append("svg:g") 
    .attr("class", "yaxis") 
    .attr("transform", "translate(25,0)") 
    .call(yAxis); 


var rect = chart.selectAll("rect") 
    .data(data) 
    .enter().append("rect") 
    .attr("x", function (d,i) {return x(new Date(d["date"]))+20; }) 
    .attr("y", function (d,i) { return graph_height - (d["num"] *v_scale);}) 
    .attr("width", x(new Date(data[1]["date"]))) 
    .attr("height", function (d,i) {return d["num"]*v_scale;}); 

rect.call(d3.behavior.zoom().x(x).scaleExtent([1, 8]).on("zoom", zoom)); 

function zoom() { 
    chart.select(".xaxis").call(xAxis); 
    chart.select(".yaxis").call(yAxis); 
} 

}

함수가 바 (의 구형)에 효과가 내가 내 줌 기능에 더 많은 기능을 추가해야 같은 느낌. 어떤 도움을 주셔서 감사합니다.

Answer 1

'selectAll'을 사용하여 각 막대에 각각 크기 조절 및 평행 이동을 적용하여 x 축에만 축척 및 변환을 제한했습니다.

이 나는 ​​귀하의 질문에 우연히 때 알아 내기 위해 노력했다 단일 경로 요소와 동일하게 작동

function zoom() { 
    chart.select(".xaxis").call(xAxis); 
    chart.select(".yaxis").call(yAxis); 
    chart.selectAll(".chart rect").attr("transform", "translate(" + d3.event.translate[0] + ",0)scale(" + d3.event.scale + ", 1)"); 
} 

.

Answer 2

나는 똑같은 것을 궁금해하며, 당신이 좋은 회사에 있다는 것을 알고 있습니다. 여기에 나의 현재 접근법이있다. 우선, 코드에서 플롯을 생성 할 수 없으며 링크를 통해 아무 것도 쓸 수 없으며 차트 렌더링이 필요 없습니다. 그래서 나는 당신의 구체적인 문제를 도울 수 없습니다. 그러나 여기서 확대/축소 가능한 사각형이있는 예제는 http://bl.ocks.org/1962173입니다. 나는 현재 그것을 통과하고 불필요한 요소를 삭제하고 그것이 작동하게 할 수 있는지 알아 봅니다. 잘하면이 도움이됩니다!