使用d3.js縮放條形圖

我正在嘗試創建一個可縮放到任何時間段的時間比例的條形圖。我能夠爲我的x軸（時間刻度）創建縮放功能，但是我的數據（在這種情況下爲正數）不會與我的座標軸一起縮放。使用d3.js縮放條形圖

下面是我的圖形的簡化版本：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); 
}

}

我覺得我應該添加更多的功能到我的變焦功能的功能是在酒吧（rects）有效。我真的很感激任何幫助。

來源

2012-06-20 Gorkem Yurtseven

使用'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)"); 
}

這同樣適用與單個路徑元素，這正是我試圖找出當我偶然發現了你的問題。

來源

2012-07-25 15:43:32 nverba

非常感謝你讓我的一天 –

鏈接似乎被打破。 – chhantyal

我想知道同樣的事情，所以至少知道你在好公司。這是我目前的方法。首先，我無法從你的代碼生成一個圖表，並且這些鏈接不會將我發送給任何有用的東西 - 不顯示圖表。所以我不能幫你解決你的具體問題。但是，有一個示例在此處具有可縮放的矩形：http://bl.ocks.org/1962173。我目前正在審查它並刪除不必要的元素，並查看是否可以使其工作。希望這有助於！

來源

2012-06-21 17:41:42 user1467068

使用d3.js縮放條形圖

回答

相關問題