D3.js - Zooming API

การซูมช่วยในการปรับขนาดเนื้อหาของคุณ คุณสามารถมุ่งเน้นไปที่พื้นที่ใดภูมิภาคหนึ่งโดยใช้วิธีการคลิกและลาก ในบทนี้เราจะพูดถึง Zooming API โดยละเอียด

การกำหนดค่า API

คุณสามารถโหลด Zooming API ได้โดยตรงจาก“ d3js.org” โดยใช้สคริปต์ต่อไปนี้

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>

<body>
   <script>
   </script>
</body>

วิธีการซูม API

ต่อไปนี้เป็นวิธีการซูม API ที่ใช้บ่อยที่สุด

d3.zoom()
zoom(selection)
zoom.transform (การเลือกการแปลง)
zoom.translateBy (การเลือก, x, y)
zoom.translateTo (การเลือก, x, y)
zoom.scaleTo (การเลือก, k)
zoom.scaleBy (การเลือก, k)
zoom.filter([filter])
zoom.wheelDelta([delta])
zoom.extent([extent])
zoom.scaleExtent([extent])
zoom.translateExtent([extent])
zoom.clickDistance([distance])
zoom.duration([duration])
zoom.interpolate([interpolate])
zoom.on (ชื่อพิมพ์ [, ผู้ฟัง])

ให้เราดูวิธีการ Zooming API ทั้งหมดโดยสังเขป

d3.zoom ()

มันสร้างพฤติกรรมการซูมใหม่ เราสามารถเข้าถึงได้โดยใช้สคริปต์ด้านล่าง

<script>
   var zoom = d3.zoom();
</script>

ซูม (การเลือก)

ใช้เพื่อใช้การแปลงการซูมกับองค์ประกอบที่เลือก ตัวอย่างเช่นคุณสามารถสร้างอินสแตนซ์พฤติกรรม mousedown.zoom โดยใช้ไวยากรณ์ต่อไปนี้

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));

zoom.transform (การเลือกการแปลง)

ใช้เพื่อตั้งค่าการแปลงการซูมปัจจุบันขององค์ประกอบที่เลือกเป็นการแปลงที่ระบุ ตัวอย่างเช่นเราสามารถรีเซ็ตการแปลงการซูมเป็นการแปลงข้อมูลประจำตัวโดยใช้ไวยากรณ์ด้านล่าง

selection.call(zoom.transform, d3.zoomIdentity);

นอกจากนี้เรายังสามารถรีเซ็ตการแปลงการซูมเป็นการแปลงเอกลักษณ์เป็นเวลา 1,000 มิลลิวินาทีโดยใช้ไวยากรณ์ต่อไปนี้

selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);

zoom.translateBy (การเลือก, x, y)

ใช้เพื่อแปลการแปลงการซูมปัจจุบันขององค์ประกอบที่เลือกด้วยค่า x และ y คุณสามารถระบุค่าการแปล x และ y เป็นตัวเลขหรือเป็นฟังก์ชันที่ส่งกลับตัวเลข หากมีการเรียกใช้ฟังก์ชันสำหรับองค์ประกอบที่เลือกฟังก์ชันนั้นจะถูกส่งผ่านข้อมูลปัจจุบัน 'd' และดัชนี 'i' สำหรับ DOM โค้ดตัวอย่างถูกกำหนดไว้ด้านล่าง

zoom.translateBy(selection, x, y) {
   zoom.transform(selection, function() {
      return constrain(this.__zoom.translate(
         x = = = "function" ? x.apply(this, arguments) : x,
         y = = = "function" ? y.apply(this, arguments) : y
      );
   }
};

zoom.translateTo (การเลือก, x, y)

ใช้เพื่อแปลการแปลงการซูมปัจจุบันขององค์ประกอบที่เลือกไปยังตำแหน่งที่ระบุของ x และ y

zoom.scaleTo (การเลือก, k)

ใช้เพื่อปรับขนาดการเปลี่ยนแปลงการซูมปัจจุบันขององค์ประกอบที่เลือกเป็น k. ที่นี่k เป็นตัวคูณมาตราส่วนที่ระบุเป็นตัวเลขหรือฟังก์ชัน

zoom.scaleTo = function(selection, k) {
   zoom.transform(selection, function() {
      k = = = "function" ? k.apply(this, arguments) : k;
   });
};

zoom.scaleBy (การเลือก, k)

ใช้เพื่อปรับขนาดการแปลง zoon ปัจจุบันขององค์ประกอบที่เลือกโดย k. ที่นี่k เป็นตัวคูณมาตราส่วนที่ระบุเป็นตัวเลขหรือเป็นฟังก์ชันที่ส่งกลับตัวเลข

zoom.scaleBy = function(selection, k) {
   zoom.scaleTo(selection, function() {
      var k0 = this.__zoom.k,
      k1 = k = = = "function" ? k.apply(this, arguments) : k;
      return k0 * k1;
   });
};

zoom.filter ([ตัวกรอง])

ใช้เพื่อตั้งค่าตัวกรองเป็นฟังก์ชันที่ระบุสำหรับลักษณะการซูม หากไม่ได้ระบุตัวกรองจะส่งกลับตัวกรองปัจจุบันตามที่แสดงด้านล่าง

function filter() {
   return !d3.event.button;
}

zoom.wheelDelta ([เดลต้า])

คุณค่าของ Δถูกส่งกลับโดยฟังก์ชันเดลต้าล้อ หากไม่ได้ระบุเดลต้าจะส่งคืนฟังก์ชันเดลต้าวงล้อปัจจุบัน

zoom.extent ([ขอบเขต])

ใช้เพื่อกำหนดขอบเขตของจุดอาร์เรย์ที่ระบุ หากไม่ได้ระบุขอบเขตจะส่งกลับตัวเข้าถึงขอบเขตปัจจุบันซึ่งมีค่าเริ่มต้นเป็น [[0, 0], [กว้าง, สูง]] โดยที่ width คือความกว้างไคลเอนต์ขององค์ประกอบและความสูงคือความสูงของไคลเอ็นต์

zoom.scaleExtent ([ขอบเขต])

ใช้เพื่อกำหนดขอบเขตมาตราส่วนให้กับอาร์เรย์ของตัวเลขที่ระบุ [k0, k1] ที่นี่k0คือสเกลแฟกเตอร์ขั้นต่ำที่อนุญาต ในขณะที่k1คือค่ามาตราส่วนสูงสุดที่อนุญาต หากไม่ได้ระบุขอบเขตจะส่งคืนขอบเขตมาตราส่วนปัจจุบันซึ่งมีค่าเริ่มต้นเป็น [0, ∞] พิจารณาโค้ดตัวอย่างที่กำหนดไว้ด้านล่าง

selection
   .call(zoom)
   .on("wheel", function() { d3.event.preventDefault(); });

ผู้ใช้สามารถลองซูมโดยการหมุนเมื่อถึงขีด จำกัด ที่สอดคล้องกันของขอบเขตขนาด หากเราต้องการป้องกันการเลื่อนในการป้อนข้อมูลล้อโดยไม่คำนึงถึงขอบเขตของขนาดให้ลงทะเบียนตัวฟังเหตุการณ์ล้อเพื่อป้องกันพฤติกรรมเริ่มต้นของเบราว์เซอร์

zoom.translateExtent ([ขอบเขต])

หากมีการระบุขอบเขตจะกำหนดขอบเขตการแปลเป็นอาร์เรย์ของจุดที่ระบุ หากไม่ได้ระบุขอบเขตจะคืนค่าขอบเขตการแปลปัจจุบันซึ่งมีค่าเริ่มต้นเป็น [[-∞, -∞], [+ ∞, + ∞]]

zoom.clickDistance ([ระยะทาง])

วิธีนี้ใช้เพื่อกำหนดระยะทางสูงสุดที่พื้นที่ที่สามารถซูมได้จะเลื่อนไปมาระหว่างขึ้นและลงซึ่งจะทำให้เกิดเหตุการณ์คลิกตามมา

zoom.duration ([ระยะเวลา])

วิธีนี้ใช้เพื่อกำหนดระยะเวลาสำหรับการเปลี่ยนการซูมเมื่อดับเบิลคลิกและแตะสองครั้งไปที่จำนวนมิลลิวินาทีที่ระบุและส่งกลับลักษณะการซูม หากไม่ได้ระบุระยะเวลาจะส่งคืนระยะเวลาปัจจุบันซึ่งมีค่าเริ่มต้นเป็น 250 มิลลิวินาทีซึ่งกำหนดไว้ด้านล่าง

selection
   .call(zoom)
   .on("dblclick.zoom", null);

zoom.interpolate ([interpolate])

วิธีนี้ใช้เพื่อสอดแทรกสำหรับการเปลี่ยนการซูมไปยังฟังก์ชันที่ระบุ หากไม่ได้ระบุ interpolate จะส่งกลับค่าโรงงานการแก้ไขปัจจุบันซึ่งมีค่าเริ่มต้นเป็น d3.interpolateZoom

zoom.on (ชื่อพิมพ์ [, ผู้ฟัง])

หากระบุ Listener จะตั้งค่าตัวฟังเหตุการณ์สำหรับชื่อประเภทที่ระบุและส่งกลับลักษณะการซูม ชื่อพิมพ์คือสตริงที่มีชื่อพิมพ์อย่างน้อยหนึ่งชื่อคั่นด้วยช่องว่าง ชื่อพิมพ์แต่ละชื่อคือประเภท (ไม่บังคับ) ตามด้วยจุด (.) และชื่อเช่น zoom.one และ zoom.second ชื่อนี้อนุญาตให้ลงทะเบียนผู้ฟังหลายคนสำหรับประเภทเดียวกัน ประเภทนี้ต้องเป็นแบบใดแบบหนึ่งต่อไปนี้ -

Start - หลังจากเริ่มการซูม (เช่นบนเมาส์)
Zoom - หลังจากเปลี่ยนการซูม (เช่นบน mousemove)
End - หลังจากสิ้นสุดการซูม (เช่นการวางเมาส์)

ในบทต่อไปเราจะพูดถึง API คำขอต่างๆใน D3.js