วิธีเพิ่มแผนภูมิไปยังไซต์ WordPress ของคุณโดยใช้ D3.js

คุณอาจคุ้นเคยกับคำว่า "การแสดงข้อมูลเป็นภาพ" เนื่องจากกลายเป็นกระแสหลักมากขึ้นทั้งในด้านการปฏิบัติและเส้นทางอาชีพ มีเหตุผลว่าทำไมฟิลด์ที่เกิดขึ้นใหม่นี้จึงกำลังดำเนินไปได้ดี – สิ่งสำคัญคือเราต้องเรียนรู้เพิ่มเติมเกี่ยวกับผู้ใช้ของเราอย่างต่อเนื่องตลอดจนแสดงข้อมูลเพื่อสำรองข้อมูลการอ้างสิทธิ์ของเรา

เมื่อข้อมูลถูกนำเสนอในลักษณะที่สะอาดและเป็นมืออาชีพ ทำให้ง่ายต่อการเข้าใจและตีความ ในกรณีส่วนใหญ่ ผู้ใช้ของคุณเป็นคนที่มองเห็นได้ ดังนั้นวิธีใดที่จะดีไปกว่าการแสดงข้อมูลด้วยแผนภูมิ D3.js หรือที่เรียกว่า Data-Driven Documents เป็นวิธีที่ยอดเยี่ยมในการเพิ่มแผนภูมิไปยังไซต์ WordPress ของคุณ

ทำไมต้อง D3?

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

ถึงตอนนี้ คุณน่าจะเคยเจอ Scalable Vector Graphics ซึ่งมักเรียกกันว่า SVG นี่คือประเภทของรูปแบบที่ไลบรารี D3 สร้างขึ้น SVG นั้นยอดเยี่ยมเพราะมีขนาดเล็ก ปรับขนาดได้ และความละเอียดที่เป็นอิสระ

เพื่อให้ชัดเจน โซลูชันนี้ไม่ได้มาพร้อมกับแผนภูมิที่สร้างไว้ล่วงหน้าใดๆ คุณจะต้องคิดขึ้นมาเอง! ดูแกลเลอรี D3 แล้วคุณจะเห็นตัวอย่างดีๆ มากมายที่จะสร้างแรงบันดาลใจให้คุณ

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

การสร้างแผนภูมิ D3 อย่างง่าย

ตอนนี้เรารู้แล้วว่า D3 นั้นยอดเยี่ยมแค่ไหน มาสร้างบางสิ่งกัน เราจะสร้างแผนภูมิโดนัทแบบง่ายๆ ซึ่งจะครอบคลุมแนวคิดพื้นฐานของ D3

ขั้นตอนที่หนึ่ง: เพิ่มสคริปต์ลงในไซต์ของคุณ

ขั้นแรก คุณจะต้องเพิ่มสคริปต์ D3 ลงในไซต์ WordPress ของคุณ เว็บไซต์ d3 มีให้ดาวน์โหลดหรือคุณสามารถเชื่อมโยงไปยังเวอร์ชันล่าสุดได้โดยตรง คุณจะสังเกตเห็นว่าฉันกำลังใช้เวอร์ชันย่อสำหรับบทช่วยสอนนี้ D3 นั้นค่อนข้างเล็กโดยธรรมชาติ แต่การย่อขนาดก็ยังเล็กกว่าเล็กน้อยเพียง 148 KB

ถัดไป คุณจะต้องสร้างไฟล์ JavaScript ใหม่ที่มีสคริปต์แผนภูมิที่กำหนดเอง ตั้งชื่อไฟล์ที่จดจำได้เพื่อให้ค้นหาได้ง่าย

เป็นสิ่งสำคัญมากที่สคริปต์ D3 จะถูกเรียกก่อน JavaScript เฉพาะแผนภูมิ หากสิ่งต่าง ๆ ไม่ถูกเรียกในลำดับที่ถูกต้อง แผนภูมิจะไม่แสดงผล (ฉันรู้สิ่งนี้จากประสบการณ์ส่วนตัว และถ้าคุณจับมันไม่ทัน คุณอาจจะต้องใช้เวลามากในการแก้ไขสิ่งที่ไม่พัง)

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

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

โปรดทราบว่าเส้นทางของไฟล์อาจแตกต่างไปจากนี้ ทั้งนี้ขึ้นอยู่กับโครงสร้างไฟล์ของคุณ

ขั้นตอนที่สอง: เพิ่มสคริปต์เพื่อสร้างแผนภูมิ

คุณจะไม่แตะต้องไฟล์ d3.js เลย ทำงานในไฟล์แผนภูมิเฉพาะของคุณเท่านั้น ในกรณีนี้จะเรียกว่า charts.js

มาทำลายสิ่งต่าง ๆ ทีละชิ้น ขั้นแรก สร้างตัวแปรของคุณ และสร้างสิ่งที่คุณต้องการในฟังก์ชันของคุณ ฉันจะตั้งชื่อตัวแปรนี้ว่า donut

var donut = (function(one) {
})();

ภายในวงเล็บปีกกา คุณจะต้องเพิ่มข้อมูลการปรับขนาดของคุณ

var width = 400,

height = 400,

radius = 200

ถัดไป กำหนดสีของคุณ แล้วกราฟสีเทาและสีน้ำเงินล่ะ? สีแรกที่แสดงในที่นี้คือสีเทาอ่อน ซึ่งจะเป็นสีเริ่มต้น ที่สองคือสีน้ำเงินที่จะเป็นตัวแทนของข้อมูล

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

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

var piedata = [{

value: 50

}, {

value: 30

}, ]

ตอนนี้คุณสามารถเพิ่มรายละเอียดเพิ่มเติมที่ช่วยกำหนดวิธีการแสดงแผนภูมิได้

ส่วนโค้งกำหนดรัศมีภายใน ลองนึกภาพรัศมีภายนอกของแผนภูมิ - คุณจะต้องให้แผนภูมิมีความหนาพอสมควร ดังนั้นการลบ 100 ก็เพียงพอแล้ว

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

สิ่งนี้จะสร้างคอนเทนเนอร์ SVG และ #donut คือสิ่งที่คุณจะกำหนดเป้าหมายบนเพจของคุณเพื่อแสดงผลแผนภูมิจริง นี่คือที่ที่คุณจะเริ่มเห็นสีของคุณจากขั้นตอนข้างต้น

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

รหัสสำเร็จรูป

ในกรณีที่คุณต้องการเปรียบเทียบสิ่งที่คุณมีกับตัวอย่าง นี่คือข้อมูลโค้ดที่สมบูรณ์

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

เห็นแผนภูมิ

คุณจะต้องสร้างหน้าหรือโพสต์ใหม่เพื่อให้คุณสามารถ "เรียก" แผนภูมิโดนัทเพื่อดูได้จริง ตรวจสอบให้แน่ใจว่าคุณอยู่ในโหมดแก้ไขข้อความ

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

ช่องมองภาพและอัตราส่วนภาพต่อแผนภูมิขนาด

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

โดยเฉพาะอย่างยิ่งในกรณีนี้ เนื่องจากเราต้องการรักษารูปทรงกลมที่สมบูรณ์แบบ การกำหนดอัตราส่วนกว้างยาวจะช่วยให้มั่นใจได้ว่า SVG จะปรับขนาดให้พอดี นี่คือที่มาของ viewBox ข้อได้เปรียบของ viewBox คือมันกำหนดว่าการวัดและพิกัดทั้งหมดที่ใช้ภายใน SVG ควรได้รับการปรับขนาดอย่างไรเพื่อให้พอดีกับพื้นที่ที่มีอยู่ หากคุณใช้ 400 เป็นการวัดด้วย ต่อไปนี้คือคำอธิบายสั้นๆ เกี่ยวกับวิธีรักษารูปทรงวงกลม

เรามีค่า 400 สองค่าที่เหมือนกัน เหตุผลก็คือขนาดภาพจึงเหมาะสม ด้วย viewBox="0 0 400 400" ของเรา เรากำลังสร้างระบบพิกัดสำหรับกราฟิก กว้าง 400 ยูนิต สูง 400 ยูนิต ความกว้างและความสูงของกราฟิก SVG กำหนดพื้นที่ที่มองเห็นได้ และการตั้งค่า viewBox ช่วยให้คุณระบุได้ว่ากราฟิกของคุณสามารถขยายให้พอดีกับคอนเทนเนอร์บางตัวได้ (ส่วนใหญ่มักจะเป็นวิวพอร์ตโดยค่าเริ่มต้น ซึ่งเป็นส่วนหนึ่งของหน้าเว็บที่ผู้ใช้สามารถ ปัจจุบันดู)

มีมากกว่านี้เล็กน้อยเพราะถึงแม้จะกำหนด viewBox ไว้ แต่ก็ยังไม่สามารถปรับขนาดได้อย่างสมบูรณ์ มันจะไม่บิดเบี้ยว ซึ่งเป็นสิ่งที่ดี แต่มีสมการมากกว่านั้น พบกับนักบิน, preserveAspectRatio AspectRatio . ไม่มีผลเว้นแต่จะมี viewBox ที่กำหนดอัตราส่วนกว้างยาวของภาพ มาตราส่วนจะได้รับการปรับเพื่อรักษาอัตราส่วนภาพ ดังนั้นคุณจึงสามารถเก็บแผนภูมิวงกลมได้อย่างสมบูรณ์แบบ เมื่อรวม preserveAspectRatio คุณกำลังวางแผนสำหรับกรณีที่ viewBox ไม่ตรงกับอัตราส่วนกว้างยาวของวิวพอร์ตหรือคอนเทนเนอร์ที่มีแผนภูมิ ในกรณีส่วนใหญ่ ตามค่าเริ่มต้น รูปภาพจะปรับขนาดจนกว่าจะพอดีกับทั้งความสูงและความกว้าง แต่ ตั้งศูนย์ภายในพื้นที่พิเศษใดๆ เราได้รวม preserveAspectRatio="xMidYMid" ซึ่งบอกให้เบราว์เซอร์จัดกึ่งกลางกราฟิกภายในวิวพอร์ตทั้งสองทิศทาง

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

รองรับเบราว์เซอร์และ d3

เป็นไปได้ว่าคุณกำลังใช้เบราว์เซอร์รุ่นใหม่ แต่ควรสังเกตว่าคุณต้องรองรับเบราว์เซอร์รุ่นเก่าหรือไม่ โดยรวมแล้ว การสนับสนุนเบราว์เซอร์นั้นยอดเยี่ยม และคุณจะไม่พบปัญหาใดๆ แต่ D3.js ใช้งานไม่ได้กับเบราว์เซอร์รุ่นเก่าอย่าง IE8

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

แผนภูมิของคุณเป็นอย่างไร แจ้งให้เราทราบในความคิดเห็น!

อะไรต่อไป?

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

พร้อมที่จะติดตั้งปลั๊กอินใหม่ที่คุณชื่นชอบแล้วหรือยัง? คลิกด้านล่าง!