d3.js

Question

के साथ ज़ूमिंग बार-ग्राफ़ मैं एक समय पैमाने के साथ एक बार ग्राफ बनाने की कोशिश कर रहा हूं जहां किसी भी समय अवधि में ज़ूम करना संभव है। मैं अपने एक्स-अक्ष (समय पैमाने) के लिए ज़ूमिंग कार्यक्षमता बनाने में सक्षम था, हालांकि मेरा डेटा (इस मामले में) मेरे अक्ष के साथ ज़ूम नहीं करता है।

यहां मेरे ग्राफ का एक सरलीकृत संस्करण है: http://jsfiddle.net/gorkem/Mf457/5/embedded/result/ जैसा कि आप देख सकते हैं कि मैं अपने एक्स-अक्ष में ज़ूम इन कर सकता हूं लेकिन बार ज़ूम नहीं करते हैं।

और यहाँ 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) पर प्रभावी होने के लिए के लिए। मेरे द्वारा किसी भी सहायता की वास्तव में सराहना की जाएगी।

Answer 1

'selectAll' का उपयोग करके, मैंने क्रमशः प्रत्येक बार में स्केलिंग और अनुवाद लागू किया है, केवल एक्स-अक्ष दोनों पैमाने और अनुवाद को प्रतिबंधित कर दिया है।

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। मैं वर्तमान में इसके माध्यम से जा रहा हूं और अनावश्यक तत्वों को हटा रहा हूं और देख रहा हूं कि क्या मैं इसे काम कर सकता हूं। उम्मीद है कि यह मदद करता है!