2013-02-14 16 views
6

मैं एक d3.js बिखराव भूखंड पर काम कर रहा हूँ और मैं इसे डॉट्स का आकार बदलने के बिना zoomable होना चाहता हूँ। मैं इसे http://static.cybercommons.org/js/d3/examples/zoom-pan/zoom-pan.html जो zoomable ग्रिड लाइन काम कर रहा है के आधार पर किया है, लेकिन अब तक मैं आ रही परेशानी अंक के रूप में अच्छी तरह से ज़ूम करने के लिए हो रही है। जब मैं ज़ूम/पैन करता हूं, तो प्रत्येक बिंदु निम्न कंसोल अलर्ट देता है:d3.js ज़ूम/खींचें बिखराव साजिश

अप्रत्याशित मूल्य अनुवाद (NaN, 0) विश्लेषण विश्लेषण पार्सिंग।

आप इसे नीचे डिजाइन के स्क्रीनशॉट के साथ यहाँ पूर्ण बात देख सकते हैं, (पूरी बात को देखने के लिए 'एक नई विंडो में खोलें' पर क्लिक करें): http://bl.ocks.org/242dcfc83d98743d8589

जे एस यहाँ की

सरलीकृत संस्करण:

d3.csv("js/AllOccupations.csv", function(data) { 

    var margin = {top: 30, right: 10, bottom: 50, left: 60}, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

    var xMax = d3.max(data, function(d) { return +d.TotalEmployed2011; }), 
     xMin = 0, 
     yMax = d3.max(data, function(d) { return +d.MedianSalary2011; }), 
     yMin = 0; 

    //Define scales 
    var x = d3.scale.linear() 
     .domain([xMin, xMax]) 
     .range([0, width]); 

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

    var colourScale = function(val){ 
     var colours = ['#9d3d38','#c5653a','#f9b743','#9bd6d7']; 
     if (val > 30) { 
      return colours[0]; 
     } else if (val > 10) { 
      return colours[1]; 
     } else if (val > 0) { 
      return colours[2]; 
     } else { 
      return colours[3]; 
     } 
    }; 


    //Define X axis 
    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom") 
     .tickSize(-height) 
     .tickFormat(d3.format("s")); 

    //Define Y axis 
    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .ticks(5) 
     .tickSize(-width) 
     .tickFormat(d3.format("s")); 

    var svg = d3.select("#chart").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 + ")") 
     .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom)); 

    svg.append("rect") 
     .attr("width", width) 
     .attr("height", height); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    // Create points 
    svg.selectAll("polygon") 
     .data(data) 
     .enter() 
     .append("polygon") 
     .attr("transform", function(d, i) { 
      return "translate("+x(d.TotalEmployed2011)+","+y(d.MedianSalary2011)+")"; 
     }) 
     .attr('points','4.569,2.637 0,5.276 -4.569,2.637 -4.569,-2.637 0,-5.276 4.569,-2.637') 
     .attr("opacity","0.8") 
     .attr("fill",function(d) { 
      return colourScale(d.ProjectedGrowth2020); 
     }); 

    // Create X Axis label 
    svg.append("text") 
     .attr("class", "x label") 
     .attr("text-anchor", "end") 
     .attr("x", width) 
     .attr("y", height + margin.bottom - 10) 
     .text("Total Employment in 2011"); 

    // Create Y Axis label 
    svg.append("text") 
     .attr("class", "y label") 
     .attr("text-anchor", "end") 
     .attr("y", -margin.left) 
     .attr("x", 0) 
     .attr("dy", ".75em") 
     .attr("transform", "rotate(-90)") 
     .text("Median Annual Salary in 2011 ($)"); 


    function zoom() { 
     svg.select(".x.axis").call(xAxis); 
     svg.select(".y.axis").call(yAxis); 
    } 
}); 

किसी भी मदद की व्यापक रूप से सराहना की जाएगी।

उत्तर

6

उदाहरण में ग्रिड लाइन कर रहे हैं, वास्तव में, अक्ष टिक्स! तो आप ध्यान दें कि आपका ज़ूम फ़ंक्शन उन्हें माउस ईवेंट पर अपडेट करता है, लेकिन आप डॉट पोजीशन को कभी अपडेट नहीं करते हैं। आपको पॉइंट पोजीशनिंग लाइनों को ज़ूम फ़ंक्शन में कॉपी करना चाहिए (या इसे एक अलग फ़ंक्शन में विभाजित करना चाहिए)।

यह मेरा लग रहा है क्या की तरह है:

function zoom() { 
    svg.select(".x.axis").call(xAxis); 
    svg.select(".y.axis").call(yAxis); 
    svg.selectAll("polygon") 
     .attr("transform", function(d, i) { 
      return "translate("+x(d.TotalEmployed2011)+","+y(d.MedianSalary2011)+")"; 
     }) 
     .attr('points','4.569,2.637 0,5.276 -4.569,2.637 -4.569,-2.637 0,-5.276 4.569,-2.637'); 
} 

आप इसे बाहर here

+0

बिल्कुल सही कोशिश कर सकते हैं! मुझे लगा कि मुझे ज़ूम फ़ंक्शन में कुछ जोड़ने की ज़रूरत है लेकिन मैं नहीं सोच सका। आपको बहुत - बहुत धन्यवाद! भविष्य में संदर्भ के लिए: समाधान आप प्रस्तावित डॉट्स ग्रिड और कुल्हाड़ियों पर अतिप्रवाह की सुविधा देता है, तो मैं उन्हें एक एसवीजी में लिपटे इस प्रकार उन्हें शामिल करने के लिए: \t \t svg.append ("svg") \t \t \t .attr ("वर्ग", "अंक") \t \t \t .attr ("चौड़ाई", चौड़ाई) \t \t \t .attr ("ऊंचाई", ऊंचाई) \t \t \t .selectAll ("बहुभुज") ,210 \t \t .data (डेटा) \t \t \t दर्ज() \t \t \t .append ("बहुभुज") \t \t \t ... – richardwestenra