ใช้ตัวเขียนจาวาในการสร้างข้อมูลแบบโต้ตอบกับ D3js

ทําไม D3js ถึงใช้ภาพประกอบข้อมูล

แผนภาพข้อมูลจะเชื่อมโยงขอบเขตระหว่างตัวเลขดิบและความเข้าใจของมนุษย์ โดยมีเครื่องมือมากมายที่มีอยู่ คือ D3js (เอกสาร Data-Driven) โดดเด่นเป็นไลบรารีจาวาสคริปต์ระดับต่ํา ที่ให้สิทธิ์ควบคุมรูปแบบวัตถุ (DOM) ซึ่งไม่เหมือนกับแผนภูมิแบบมาตรฐานคุณภาพสูงที่มีการกําหนดค่าเอง D3 ให้คุณสร้างภาพให้พอดีจากแผนภูมิแบบภาพแบบง่าย ๆ ไปเป็นแผนภาพแบบแผนภูมิและผังเครือข่าย โมเดลของอัลบั้มนี้แน่ใจว่าข้อมูลต่าง ๆ จะเปลี่ยนแปลงค่าต่าง ๆ ของคุณโดยอัตโนมัติ ทําให้สามารถปรับเปลี่ยนหรือปรับเปลี่ยนรูปแบบภาพได้โดยปรับแต่งให้เข้ากับข้อมูลได้ตามรูปแบบแฟ้ม DPOFF และใช้ข้อมูลแบบ DPForactor ได้อย่างง่าย โดยมีความสามารถในการจัดการอย่างมีประสิทธิภาพ และระบบข้อมูลแบบต่าง ๆ ที่ใช้จัดการอย่างง่าย เช่น language languages และระบบย่อยของโครงการ D.

Core Concepts of D3js

เพื่อ จะ ควบคุม D3 ได้ คุณ ต้อง เข้าใจ หลัก การ พื้น ฐาน ของ มัน: การ คัด เลือก, การ ผูก มัด ข้อมูล, มาตรา, และ การ เลือก วิธี ดี วี จี, การ เลือก องค์ ประกอบ ของ DOM, การ ผูก มัด ข้อมูล, และ การ นํา มา ใช้ ใน การ เปลี่ยน แปลง.

การจับคู่และการจับคู่ข้อมูล

D3 ใช้ CSS เลือกองค์ประกอบเป้าหมาย จากนั้น เชื่อมต่อข้อมูลไปยังพวกมัน วิธีการ [FLT: 0] ร่วมกับลําดับของค่าที่เลือก และวิธีการ [FT: 1) สร้างองค์ประกอบใหม่สําหรับข้อมูลใดๆ ที่ไม่มีโหนด DOM ที่สอดคล้องกัน รูปแบบ inpate-exit อนุญาตให้คุณจัดการกับข้อมูลไดนามิกส์ได้มีประสิทธิภาพ

ตัวอย่างเช่น เพื่อสร้างวงกลมสําหรับชุดข้อมูล

const data = [10, 25, 40, 30];
const svg = d3.select("body").append("svg")
 .attr("width", 400)
 .attr("height", 200);

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d)
 .attr("fill", "steelblue");

มาตราส่วนและแกน

ข้อมูล Raw มักสแปนช่วงที่ไม่มีการโยงไปยังพิกัดพิกเซล D3 ให้ [FLT: 0] ขนาด [FLT: 0] ที่ทําแผนที่โดเมน (ค่าสี) ไปเป็นช่วง (ค่าพิกเซล) เกล็ดรวม (FLT:3) และ [FLT: 4] (FLT: 5] axs ถูกสร้าง [FLT: 6] หรือ [FT] [FT] หรือ [FLL]] ไมโครค. ไมโครค. และโครงสร้างแกนอื่น ๆ ของแกน (FTL: 7). ไมโครค.

ตัวอย่างของขนาดเชิงเส้น:

const xScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([0, width]);

const yScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([height, 0]);

const xAxis = d3.axisBottom(xScale);
svg.append("g")
 .attr("transform", `translate(0, ${height})`)
 .call(xAxis);

การมองเห็นแบบโต้ตอบบนอาคารกับ D3js

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

การทําตัวเน้นแบบผุดแสดงรอยหยัก

Tooltiples ให้ข้อมูลที่ถูกต้องในการยกภาพขึ้นบิน โดยใช้ระบบเหตุการณ์ของ D3 นี้ คุณสามารถสร้าง [FLT: 9] ที่แสดงรายละเอียด ตัวอย่างเช่น การขยายชาร์ตบาร์ที่มีทูลทิป แสดงอยู่ในรหัสดั้งเดิมแล้ว; ที่นี่เราเพิ่ม [FLT: 0] เปลี่ยนแปลง[FLT: 1) การยก:

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", d => height - d * 3)
 .attr("width", 50)
 .attr("height", d => d * 3)
 .attr("fill", "steelblue")
 .on("mouseover", function(event, d) {
 d3.select(this).attr("fill", "orange");
 tooltip.style("display", "block").text(`Value: ${d}`);
 })
 .on("mousemove", (event) => {
 tooltip.style("left", (event.pageX + 10) + "px")
 .style("top", (event.pageY - 20) + "px");
 })
 .on("mouseout", function() {
 d3.select(this).attr("fill", "steelblue");
 tooltip.style("display", "none");
 });

ย่อ/ ขยาย

สําหรับข้อมูลขนาดใหญ่ หรือข้อมูลเวลา ที่มีการย่อขยาย และการเติมข้อมูล ช่วยให้ผู้ใช้สนใจในขอบเขตที่น่าสนใจ D3 พฤติกรรม [FLT: 11] ของ [FLT: 11] เปลี่ยนแปลงระบบพิกัด ให้ปรับใช้กับ SVG กลุ่มที่มีองค์ประกอบภาพของคุณ

const zoom = d3.zoom()
 .scaleExtent([1, 10])
 .on("zoom", (event) => {
 g.attr("transform", event.transform);
 });

svg.call(zoom);

ปรับปรุงข้อมูลแบบไม่ตายตัว

รูปแบบการโต้ตอบมักจําเป็นในการรีเฟรชข้อมูลโดยไม่ต้องเรียกหน้าใหม่อีกครั้ง รูปแบบการปรับปรุงของ D3 จะจัดการอย่างสุภาพในการเพิ่ม, ลบ และแก้ไของค์ประกอบ กุญแจคือ การทําการผนวกข้อมูลใหม่เข้ากับข้อมูลใหม่ และใช้ [FLT: 13] สําหรับโหนดเพิ่ม

function updateData(newData) {
 const circles = svg.selectAll("circle").data(newData);
 circles.exit().remove(); // remove old
 circles.enter().append("circle") // add new
 .merge(circles) // merge with existing
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d);
}

เทคนิกขั้นสูงของ D3

ผัง และ ภาพ ถ่าย ทาง ภูมิศาสตร์

D3 รวมโมดูลผังเฉพาะสําหรับชาร์ตที่ซับซ้อน: สร้างข้อมูลเชิงภูมิศาสตร์ จําลองฟิสิกส์สําหรับกราฟเครือข่าย [FT: 17] โครงการโครงการแผนที่ข้อมูลโดยใช้ GOJson มอดูลนี้ได้ลดรหัสที่จําเป็นในการสร้างภาพอย่างซับซ้อน ตัวอย่างเช่น การสร้างเครือข่ายที่บังคับ:

const simulation = d3.forceSimulation(nodes)
 .force("link", d3.forceLink(links))
 .force("charge", d3.forceManyBody())
 .force("center", d3.forceCenter(width / 2, height / 2));

การ เปลี่ยน แปลง และ การ เคลื่อน ไหว

การเปลี่ยน แปลงที่นุ่มนวล จะช่วยเพิ่มประสบการณ์ของผู้ใช้ได้ D3 (FLT:19) การเปลี่ยนคุณลักษณะตามกาลเวลา คุณสามารถควบคุมช่วงเวลา, การลดความเร็ว, และความล่าช้าได้ ตัวอย่างเช่น การเพิ่มแถบการขยาย:

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", height)
 .attr("width", 50)
 .attr("height", 0)
 .attr("fill", "steelblue")
 .transition()
 .duration(800)
 .ease(d3.easeBounce)
 .attr("y", d => height - d * 3)
 .attr("height", d => d * 3);

แบบฝึกหัดที่ดีที่สุดสําหรับอ่าน D3 ด้วยการผลิตแบบเพิ่ม

การตั้งแนวร่วม

สําหรับข้อมูลขนาดใหญ่ (thousands of point), การจัดการ DOM โดยตรงจะกลายเป็นแบบช้า ใช้ [FLT: 0] Canvas [FLT: 1) แปลโดยผ่านทาง D3-canvas หรือพิจารณา. เวป (FTT: 3) ด้วยไลบรารีแบบ ระเบียงแบบ lt; สําหรับ SVG- impleplepleplepleplepleases, การใช้ DOM [FT] [FLT]] และหลีกเลี่ยงองค์ประกอบในทุกเฟรม [FTIF] [T] [LElllllllllll+[T[T]]] [TLLLFLLFLLLLLLLLL] และตัวควบคุมเหตุการณ์ต่าง ๆ] เลือกรายการ: [TVPULULULULULUCTULULULLLLLLUSTSDLLUSTS (ULUSTERESTESTESTERSTERDUSTERUSTERUSTERUSTEST].USTUSTEST (.USTDLUST

function resize() {
 const width = container.node().getBoundingClientRect().width;
 svg.attr("width", width)
 .attr("height", width * aspectRatio);
 // redraw scales and axes
}
window.addEventListener("resize", resize);

const brush = d3.brush()
 .extent([[0, 0], [width, height]])
 .on("brush end", brushed);

svg.append("g").call(brush);

function brushed(event) {
 if (event.selection) {
 const [[x0, y0], [x1, y1]] = event.selection;
 circles.classed("selected", d =>
 x0 <= xScale(d.x) && xScale(d.x) <= x1 &&
 y0 <= yScale(d.y) && yScale(d.y) <= y1
 );
 } else {
 circles.classed("selected", false);
 }
}