d3v4 - ज़ूमिंग (d3.zoom.x के बराबर)

मैं अपने डी 3 कोड को v3 से v4 में माइग्रेट कर रहा हूं और d3.zoom.x, d3.zoom.y गुणों के बराबर समीकरण ढूंढने वाले मुद्दे हैं।d3v4 - ज़ूमिंग (d3.zoom.x के बराबर)

यहाँ एक संक्षिप्त कोड हिस्सा है, सबसे महत्वपूर्ण तत्वों सहित है:

  this.init = function(obj, def) { 

      /* X-axis */ 
      x = d3.scaleTime() 
       .range([0, width]); 


      xAxis = d3.axisBottom(x) 
       .ticks(ticks); 

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

      /* Y-axis */ 
      for (var i = 0; i < 1; i++) { 
       // Returns the y and yAxis as arrays 
       createYAxis(i); 
      } 

      initZoom(); 

     }; 
      // Zoom trigger 
      var drawUpdXY = function(){ 
       setPause(true); 
       drawUpd(); 
       zoomY.y(y[0]); 
       zoomX.x(x); 


      zoom = d3.zoom() 
       .on("zoom", drawUpdXY); 

      zoomX = d3.zoom() 
       .on("zoom", drawUpdX); 

      zoomY = d3.zoom() 
       .on("zoom", drawUpdY); 
      };

मैं इस का उपयोग करने के लिए "zoom.x को बदलने के लिए (एक्स) की कोशिश की है, zoom.y (y [0]) "

 xAxis.scale(d3.event.transform.rescaleX(x)); 
     yAxis[0].scale(d3.event.transform.rescaleY(y[0]));

हालांकि, इन केवल अक्ष rescale, डेटा गैर zommed छोड़कर।

स्रोत

2016-09-08 Pety Petyy

के बाद से इस बल्कि पुराना है, क्या तुमने कभी एक समाधान मिला? मैं एक ही समस्या पर फंस गया हूँ। – jmk

इस दिन का समाधान नहीं मिला है - मैंने इंतजार करने का फैसला किया है जब तक v4 के लिए कोई बड़ा समुदाय न हो। –

** _ tl; dr: _ यह आपके रिफैक्टर को पुन: स्थापित करने में मदद कर सकता है, क्यों और कैसे चल रहा है, और इसके काम का एक उदाहरण चलने के लिए लिंक देखें ** मैं एक समान परियोजना पर काम कर रहा हूं जो एक पैनिंग/d3v4 और प्रतिक्रिया में समन्वय ग्रिड सिस्टम ज़ूमिंग। रास्ते में, मैंने यह [आलेख बताता है कि नया ज़ूमिंग/पैनिंग कैसे काम करता है] (http://emptypipes.org/2016/07/03/d3-panning-and-zooming/), और मुझे एहसास हुआ कि मुझे करना था पुनर्विचार करें कि मैंने अपने रिफैक्टर को कैसे संरचित किया। फिर, मैंने शुद्ध डी 3 में यह [कोडकैन जो मैं करने की कोशिश कर रहा था] (https://codepen.io/mduleone/pen/wJxrbj) बनाया। अभी भी प्रतिक्रिया पक्ष पर काम कर रहे हैं। – mduleone

मैं बात नहीं कर सकता कि कैसे d3 v3 ने ज़ूम को संभाला है, क्योंकि मैंने हाल ही में डी 3 के साथ काम करना शुरू कर दिया है, लेकिन नीचे दिया गया कोड आपको सही दिशा में इंगित करना चाहिए। क्या हो रहा है इसका वर्णन करने के लिए मैं अपनी पूरी कोशिश करूंगा। मैं सुधार, सुधार, और बेहतर स्पष्टीकरण आमंत्रित करता हूं।

सबसे पहले, एक MCVE

<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Energy Visualizer</title> 
 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
 
    <script src="https://d3js.org/d3-color.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> 
 
    <style> 
 
    body { 
 
     background-color: #4e5965; 
 
    } 
 
    </style> 
 
    </svg> 
 
</head> 
 

 
<body> 
 
    <div class="chart" /> 
 
    <script> 
 
    var svg = d3.select(".chart").append("svg") 
 
     .attr("width", 200) 
 
     .attr("height", 200); 
 

 
    var data = [{ 
 
     "x": 2, 
 
     "y": 8, 
 
     "color": "green" 
 
    }, { 
 
     "x": 4, 
 
     "y": 6, 
 
     "color": "red" 
 
    }]; 
 

 
    var width = svg.attr("width"); 
 
    var height = svg.attr("height"); 
 

 
    x_scale = d3.scaleLinear().domain([0, 10]).range([0, width]); 
 
    y_scale = d3.scaleLinear().domain([0, 10]).range([0, height]); 
 

 
    var circles = svg.selectAll("circle") 
 
     .data(data) 
 
     .enter() 
 
     .append("circle") 
 
     .attr("cx", function(d) { 
 
     return x_scale(d.x); 
 
     }) 
 
     .attr("cy", function(d) { 
 
     return y_scale(d.y); 
 
     }) 
 
     .attr("r", 5) 
 
     .attr("fill", function(d) { 
 
     return d.color 
 
     }); 
 

 
    var xAxis = d3.axisBottom(x_scale); 
 
    var yAxis = d3.axisRight(y_scale); 
 

 
    var x_axis = svg.append("g").call(xAxis); 
 
    var y_axis = svg.append("g").call(yAxis); 
 
    </script> 
 
</body> 
 

 
</html>

यह एक लाल और हरे रंग चक्र के साथ सिर्फ एक सरल बिखराव साजिश है। आप देख सकते हैं कि मैंने एक्स और वाई अक्ष के घटकों को कैसे तोड़ दिया है। यह d3.zoom() के साथ खेल में आता है।

अगला, चलिए एक ज़ूम घटक जोड़ें।

<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Energy Visualizer</title> 
 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
 
    <script src="https://d3js.org/d3-color.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> 
 
    <style> 
 
    body { 
 
     background-color: #4e5965; 
 
    } 
 
    </style> 
 
    </svg> 
 
</head> 
 

 
<body> 
 
    <div class="chart" /> 
 
    <script> 
 
    var svg = d3.select(".chart").append("svg") 
 
     .attr("width", 200) 
 
     .attr("height", 200); 
 

 
    var zoom = d3.zoom() 
 
     .on("zoom", zoomed); 
 

 
    svg.call(zoom); 
 

 
    var data = [{ 
 
     "x": 2, 
 
     "y": 8, 
 
     "color": "green" 
 
    }, { 
 
     "x": 4, 
 
     "y": 6, 
 
     "color": "red" 
 
    }]; 
 

 
    var width = svg.attr("width"); 
 
    var height = svg.attr("height"); 
 

 
    x_scale = d3.scaleLinear().domain([0, 10]).range([0, width]); 
 
    y_scale = d3.scaleLinear().domain([0, 10]).range([0, height]); 
 

 
    var circles = svg.selectAll("circle") 
 
     .data(data) 
 
     .enter() 
 
     .append("circle") 
 
     .attr("cx", function(d) { 
 
     return x_scale(d.x); 
 
     }) 
 
     .attr("cy", function(d) { 
 
     return y_scale(d.y); 
 
     }) 
 
     .attr("r", 5) 
 
     .attr("fill", function(d) { 
 
     return d.color 
 
     }); 
 

 
    var xAxis = d3.axisBottom(x_scale); 
 
    var yAxis = d3.axisRight(y_scale); 
 

 
    var x_axis = svg.append("g").call(xAxis); 
 
    var y_axis = svg.append("g").call(yAxis); 
 

 

 
    function zoomed() { 
 
     var new_x_scale = d3.event.transform.rescaleX(x_scale); 
 
     var new_y_scale = d3.event.transform.rescaleY(y_scale); 
 

 
     x_axis.transition() 
 
     .duration(0) 
 
     .call(xAxis.scale(new_x_scale)); 
 

 
     y_axis.transition() 
 
     .duration(0) 
 
     .call(yAxis.scale(new_y_scale)); 
 

 
     circles 
 
     .attr("cx", function(d) { 
 
      return new_x_scale(d.x) 
 
     }) 
 
     .attr("cy", function(d) { 
 
      return new_y_scale(d.y) 
 
     }); 
 

 
    } 
 
    </script> 
 
</body> 
 

 
</html>

यहाँ, आप कि चार्ट देख सकते हैं जूम-इन, ज़ूम आउट और दोनों अक्षों के अनुसार खींच अनुमति देता है। मैं बेकार हूं कि आप केवल एक धुरी ज़ूम चाहते हैं, इसलिए उस स्थिति में, केवल एक्स-अक्ष और प्रत्येक मंडल की स्थिति के x घटक को पुन: सहेज लें।

एक आखिरी स्निपेट जो मुझे लगता है वह कर रहा है।

<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Energy Visualizer</title> 
 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
 
    <script src="https://d3js.org/d3-color.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> 
 
    <style> 
 
    body { 
 
     background-color: #4e5965; 
 
    } 
 
    </style> 
 
    </svg> 
 
</head> 
 

 
<body> 
 
    <div class="chart" /> 
 
    <script> 
 
    var svg = d3.select(".chart").append("svg") 
 
     .attr("width", 200) 
 
     .attr("height", 200); 
 

 
    var zoom = d3.zoom() 
 
     .on("zoom", zoomed); 
 

 
    svg.call(zoom); 
 

 
    var data = [{ 
 
     "x": 2, 
 
     "y": 8, 
 
     "color": "green" 
 
    }, { 
 
     "x": 4, 
 
     "y": 6, 
 
     "color": "red" 
 
    }]; 
 

 
    var width = svg.attr("width"); 
 
    var height = svg.attr("height"); 
 

 
    x_scale = d3.scaleLinear().domain([0, 10]).range([0, width]); 
 
    y_scale = d3.scaleLinear().domain([0, 10]).range([0, height]); 
 

 
    var circles = svg.selectAll("circle") 
 
     .data(data) 
 
     .enter() 
 
     .append("circle") 
 
     .attr("cx", function(d) { 
 
     return x_scale(d.x); 
 
     }) 
 
     .attr("cy", function(d) { 
 
     return y_scale(d.y); 
 
     }) 
 
     .attr("r", 5) 
 
     .attr("fill", function(d) { 
 
     return d.color 
 
     }); 
 

 
    var xAxis = d3.axisBottom(x_scale); 
 
    var yAxis = d3.axisRight(y_scale); 
 

 
    var x_axis = svg.append("g").call(xAxis); 
 
    var y_axis = svg.append("g").call(yAxis); 
 

 

 
    function zoomed() { 
 
     var new_x_scale = d3.event.transform.rescaleX(x_scale); 
 

 
     x_axis.transition() 
 
     .duration(0) 
 
     .call(xAxis.scale(new_x_scale)); 
 

 
     circles 
 
     .attr("cx", function(d) { 
 
      return new_x_scale(d.x) 
 
     }); 
 

 
    } 
 
    </script> 
 
</body> 
 

 
</html>

स्रोत

2018-02-01 04:41:05

d3v4 - ज़ूमिंग (d3.zoom.x के बराबर)

उत्तर

संबंधित मुद्दे