เพิ่มแผนภูมิ D3.JS ด้วยการไล่ระดับสี SVG

Nadieh Bremer จะอยู่ที่ สร้างลอนดอน ในเดือนกันยายนที่เธอจะแสดงให้เห็นถึงวิธีการรับ svg เกินรูปร่างเพียง ใช้ JavaScript, CSS และ D3.JS เพื่อให้การแสดงข้อมูลข้อมูลสนุกและน่าตื่นเต้นยิ่งขึ้น จองตั๋วของคุณตอนนี้ !

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

ที่หลักของมันภาพ D3 ทุกภาพถูกสร้างขึ้นจากองค์ประกอบ SVG ตัวอย่างเช่นสำหรับแต่ละ datapoint ในแผนภูมิ scatterplot เพื่อสร้างแผนภูมิแท่งเป็นแกนพิกัดแบบขนานหรือกราฟความลาดชันเป็นป้ายกำกับและมีประโยชน์อย่างยิ่งสำหรับทุกสิ่งทุกอย่างในทางปฏิบัติ นอกจากนี้ SVG มีความละเอียดอิสระดังนั้นจึงดูดีในระดับการแสดงผลหรือการซูมใด ๆ

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

ค้นหาไฟล์ทั้งหมดที่คุณต้องการสำหรับการกวดวิชานี้ ที่นี่ .

การไล่ระดับสีเชิงเส้น

บางครั้งเมื่อฉันสร้างแผนภูมิเส้นที่มีบรรทัดเดียวมันจะรู้สึกว่างเปล่าเล็กน้อยและสามารถหลงทางบนพื้นหลังสีขาว เพื่อให้โดดเด่นมากขึ้นฉันวางการไล่ระดับแสงด้านล่างโดยใช้ D3 d3.svg.area ฟังก์ชั่นที่เต็มไปด้วยการไล่ระดับสี SVG (ดูรูปที่ 1)

ฉันต้องการให้การไล่ระดับสีวิ่งในแนวตั้งจากด้านบน (ที่มีสีเดียวกับเส้น แต่เป็นเฉดสีที่เบากว่า) ที่ด้านล่าง (ที่มันควรจะกลายเป็นสีขาวหรือโปร่งใส) นี่คือสิ่งที่เรียกว่าการไล่ระดับสีเชิงเส้น สิ่งที่เปลี่ยนสีตามเส้นตรง

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

 var arregradient = svg.append ("defs")
. Append ("LineArgradient")
.attr ("ID", "พื้นที่")
.attr ("x1", "0%") Attr ("Y1", "0%")
.attr ("x2", "0%"). Attr (Y2 "," 100% "); 

สองบรรทัดสุดท้ายของรหัสข้างต้นกำหนดว่าการไล่ระดับสีควรทำงานอย่างไร คิดว่ามันเป็นสายที่มองไม่เห็น: x1 และ y1 เป็นตำแหน่งเริ่มต้นของบรรทัดที่มองไม่เห็นและ x2 และ y2 ระบุจุดสิ้นสุดของมันเพื่อให้ทิศทางของการไล่ระดับสี มันง่ายที่สุดที่จะกำหนดสิ่งเหล่านี้เป็นเปอร์เซ็นต์แม้ว่าจะเป็นไปได้ที่จะใช้ตำแหน่งพิกเซลที่แน่นอน โดยค่าเริ่มต้นที่ตั้งอ้างถึงกล่องขอบเขตขององค์ประกอบลงในที่การไล่ระดับสีถูกนำไปใช้ เราต้องการให้การไล่ระดับสีวิ่งในแนวตั้งดังนั้น x1 และ x2 ควรจะเหมือนกัน ( 0% ดี) y1 จะต้องมี 0% และ Y2 100% .

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

เรายังสามารถตั้งค่าความทึบของแต่ละสีด้วย หยุดความทึบ . ที่นี่ฉันกำลังทำให้เฉดสีสว่างขึ้นเล็กน้อยที่ด้านบนและโปร่งใสอย่างสมบูรณ์ที่ด้านล่าง

AreaGradient.Append ("หยุด")
.attr ("ชดเชย", "0%")
.attr ("สีหยุด", "# 21825c")
.attr ("หยุด - ความทึบแสง", 0.6);
AreaGradient.Append ("หยุด")
.attr ("ชดเชย", "80%")
.attr ("สีหยุด", "สีขาว")
.attr ("หยุด - ความทึบแสง", 0); 

ตอนนี้การไล่ระดับสีเชิงเส้นจะถูกตั้งค่าเราสามารถสร้างแผนภูมิพื้นที่และเติมเต็มด้วยการไล่ระดับสี ในการทำเช่นนี้ใช้ URL (# Gradient-ID) ในสไตล์การเติมพร้อมกับ ID ที่ไม่ซ้ำกันที่เราตั้งไว้ก่อนหน้านี้

 svg.append ("เส้นทาง")
.Style ("เติม", "URL (#aragradient)")
.attr ("D", พื้นที่ทำงาน (ชุดข้อมูล)); 

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

ตำนานที่ราบรื่น

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

ในบางแผนภูมิคุณจะใช้สีเพื่อแยกแยะระหว่างกรณีที่ไม่ต่อเนื่อง (ตัวอย่างเช่นประเทศที่แตกต่างกัน) ซึ่งในกรณีนี้สีมักจะแตกต่างกันมาก อย่างไรก็ตามคุณสามารถใช้สีเพื่อระบุค่าเชิงปริมาณ

ที่นี่เราเป็นตัวแทนของอุณหภูมิภายนอก (ดูรูปที่ 2) การเปลี่ยนสีค่อยๆบ่งบอกถึงอุณหภูมิที่ต่ำไปจนถึงสูง เพื่อแสดงสิ่งนี้ในตำนานเราจะสร้างสี่เหลี่ยมยาวและเติมเต็มด้วยการไล่ระดับสีจากซ้ายไปขวา เราสามารถนำการไล่ระดับสีที่เราสร้างขึ้นใหม่สำหรับแผนภูมิเส้นของเรา แต่พลิก 90 องศา (ดังนั้น x2 ตอนนี้วิ่งไปที่ 100% , ค่อนข้างมากกว่า y2 . แม้ว่าโดยทั่วไปจะไม่แนะนำให้ใช้จานสีรุ้งในการสร้างภาพข้อมูลผู้คนจะถูกใช้เพื่อดูแผนที่อุณหภูมิที่มีสีสันและฉันได้เลือกเก้าสีให้ใช้ในตัวอย่างของเรา

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

 svg.append ("defs")
. Append ("LineArgradient")
.attr ("ID", "Legendgradientmulti")
.attr ("x1", "0%") Attr ("Y1", "0%")
.attr ("x2", "100%") attr ("Y2", "0%")
. เลือกทั้งหมด ("หยุด")
.ข้อมูล([
{ชดเชย: "0%", สี: "# 2C7BB6"}
{ชดเชย: "12.5%", สี: "# 00A6CA"}
{ชดเชย: "25%", สี: "# 00CCBC"}
{ชดเชย: "37.5%", สี: "# 90EB9D"}
{ชดเชย: "50%", สี: "# FFFF8C"}
{ชดเชย: "62.5%", สี: "# F9D057"}
{ชดเชย: "75%", สี: "# F29E2E"}
{ชดเชย: "87.5%", สี: "# E76818"}
{ชดเชย: "100%", สี: "# D7191C"}])
.Enter () ผนวก ("หยุด")
.attr ("ออฟเซ็ต", ฟังก์ชั่น (d) {return d.offsets;})
.attr ("สีหยุด", ฟังก์ชั่น (d) {return d.color;}); 

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

 svg.append ("rect")
.attr ("x", 0) .attr ("y", 0)
.attr ("ความกว้าง", 500) .attr (ความสูง ", 20)
.Style ("เติม", "URL (#LegendGradientMulti)"); 

แผนภูมิตำนานเหล่านี้ไปกับการสร้างขึ้นใหม่หลังจากการทำงานที่ยอดเยี่ยมของ www.weather-radials.com แสดงอุณหภูมิในนิวยอร์กหรือปักกิ่งในปี 2558 อุณหภูมิเฉลี่ยในแต่ละวันถูกระบุด้วยเส้นสีและเส้นเหล่านี้จะถูกจัดเรียงเพื่อสร้างกราฟวงกลม ตำนานด้านล่างอธิบายว่าแต่ละสีหมายถึงอะไร กราฟหนึ่งใช้การไล่ระดับสีจากสีหนึ่งไปยังอีกสีหนึ่งและอีกหนึ่งความก้าวหน้าตลอดทั้งเก้าสี

การไล่ระดับสีตามข้อมูล

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

ดังนั้นเรากลับไปที่ 90s กลับไปที่คอลเลกชันของแวดวงแบนซึ่งเป็นตัวแทนของดาวเคราะห์ในระบบสุริยะของเราเองเป็นทรงกลมที่ดู 3 มิติพร้อมการไล่ระดับสีรัศมี (รูปที่ 4) ฉันได้สร้างชุดข้อมูลขนาดเล็กที่มีชื่อและเส้นผ่าศูนย์กลางของดาวเคราะห์ แต่ละคนจะใช้สีเดียวซึ่งเราจะใช้เพื่อสร้างการไล่ระดับสีที่เป็นเอกลักษณ์สำหรับแต่ละดาวเคราะห์

 var gradientradial = svg.append ("defs")
. เลือกทั้งหมด ("RadiAlgradient")
.Data (ดาวเคราะห์)
.Enter () ผนวก ("RadiAlgradient")
.attr ("ID", ฟังก์ชั่น (d) {ส่งคืน "การไล่ระดับสี -" d.planet;})
.attr ("cx", "15%")
.attr ("cy", "50%")
.attr ("r", "85%"); 

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

การไล่ระดับสีรัศมีแตกต่างกันเล็กน้อยกับเส้นตรงเล็กน้อย เราสร้างมันในลักษณะเดียวกันกับ SVG Circle: จัดหาศูนย์กลางของการไล่ระดับสีด้วยความเคารพต่อขอบเขตวัตถุที่จะใช้งาน cx และ cy . ค่าเหล่านี้เริ่มต้น 50% ซึ่งเป็นศูนย์กลางของวัตถุ

เพื่อจำลองการปรากฏตัวของดาวที่ส่องแสงบนดาวเคราะห์จากด้านหนึ่งเราจะย้ายจุดศูนย์กลางของการไล่ระดับสีไปทางซ้ายโดยการตั้งค่า cx ถึง 15% . รัศมีของการไล่ระดับสี (ที่หยุดการไล่ระดับสีของ 100% ควรจบ) ถูกระบุโดย r . นอกจากนี้ยังมีค่าเริ่มต้น 50% แต่เนื่องจากเรา cx ชดเชยนี่คือตอนนี้ 85% ดังนั้นมันจึงเติมวงกลมทั้งหมด

เราสามารถใช้ข้อมูลดาวเคราะห์เพื่อต่อท้ายการหยุดสี เพื่อสร้างลักษณะที่ปรากฏของทรงกลมที่ถูกส่องแสงสีที่ 0% ควรมีน้ำหนักเบา โดยใช้ d3.rgb () สว่าง (k) ฉันไม่ต้องระบุสีแยกต่างหากเนื่องจาก D3 จะทำการคำนวณนั้นสำหรับฉัน มูลค่า k กำหนดจำนวนไฟที่เบากว่าที่ฉันต้องการให้สีกลายเป็น ที่อยู่รอบ ๆ 50% ฉันตั้งค่าสีที่แท้จริงในชุดข้อมูล ที่ขอบฉันต้องการสีที่มืดกว่าเล็กน้อยให้การปรากฏตัวของเฉดสี มีเหตุผลนอกจากนี้ยังมี d3.rgb () มืดลง (k) ที่เราสามารถใช้ได้

 Gradientradial.append ("หยุด")
.attr ("ชดเชย", "0%")
.attr ("สีหยุด", ฟังก์ชั่น (d) {
ส่งคืน D3.RGB (D.Color) .Brige (1); });
Gradientradial.append ("หยุด")
.attr ("ชดเชย", "50%")
.attr ("สีหยุด", ฟังก์ชั่น (d) {return d.color;});
Gradientradial.append ("หยุด")
.attr ("ออฟเซ็ต", "100%")
.attr ("สีหยุด", ฟังก์ชั่น (d) {
ส่งคืน D3.RGB (D.Color) .Darker (2.5); }); 

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

 SVG.Selectall ("ดาวเคราะห์")
.Data (ดาวเคราะห์)
.Enter () ผนวก ("วงกลม")
/ * ตั้งค่าแอตทริบิวต์คลาสตำแหน่งและรัศมี ... * /
.Style ("เติม" ฟังก์ชั่น (D) {
ส่งคืน "URL (# ไล่ระดับสี -" + D.planet + ")"; }); 

ฉันได้เพิ่มดวงอาทิตย์ด้วยการไล่ระดับสีของตัวเอง แต่ฉันทิ้งแล้ว cx , cy และ r ด้วยการตั้งค่าเริ่มต้นของ 50% เพื่อให้ดูเหมือนว่าดวงอาทิตย์ส่องแสงจากศูนย์กลางออกไปด้านนอก

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

เล่นกับทิศทาง

ตอนนี้เราได้สำรวจวิธีการตั้งค่าด้านสีตามข้อมูล แต่มีความเป็นไปได้มากขึ้น เราสามารถตั้งค่าทุกอย่างตามข้อมูล - แม้กระทั่งทิศทางของการไล่ระดับสีแต่ละครั้ง

ลองทำสิ่งนี้มาทำแผนภาพคอร์ด D3 ที่แสดงความร่วมมือระหว่างเวนเจอร์สในจักรวาลภาพยนตร์มหัศจรรย์ (รูปที่ 5) คอร์ดที่วิ่งระหว่างเวนเจอร์สหกตัวมีขนาดตามจำนวนภาพยนตร์ที่พวกเขาทั้งคู่ปรากฏขึ้น เราจะเติมคอร์ดเหล่านี้ด้วยการไล่ระดับสีเชิงเส้นอย่างง่ายเปลี่ยนจากสีของการล้างแค้นหนึ่งไปยังอีกสีหนึ่ง

คอร์ดมักจะไม่เป็นแนวนอนหรือแนวตั้ง ดังนั้นเราจะต้องตั้งค่า x1 x2 , y1 และ y2 ค่าตามตำแหน่งของส่วนโค้งด้านนอกของ Avenger แต่ละแห่ง ข้อมูลนี้ไม่ได้อยู่ในชุดข้อมูลดั้งเดิมของเรา แต่หลังจากที่เราได้ส่งไปยัง D3 d3.layout.chord ฟังก์ชั่นเราจะได้รับชุดข้อมูลใหม่ที่มีมุมเริ่มต้นและสิ้นสุดของแต่ละอาร์ค (เช่น d.source.startangle และ d.target.endangle . นี่คือชุดข้อมูลที่เราจัดหาในขณะที่สร้างการไล่ระดับสี

เราจำเป็นต้องรู้ตำแหน่งพิกเซลของสายที่มองไม่เห็นที่ไหลจากปลายด้านหนึ่งของคอร์ดไปยังอีกด้านหนึ่ง เหล่านี้จะใช้เพื่อให้ x1, .. , y2 คุณลักษณะของการไล่ระดับสีแต่ละครั้ง เราสามารถใช้ตรีโกณมิติโดยใช้รัศมีของแผนภาพคอร์ดและที่ตั้งครึ่งทางตามส่วนโค้งของการล้างแค้นแต่ละครั้งเพื่อรับตำแหน่งเหล่านี้ สูตรตรีโกณมิติเต็มรูปแบบถูกลบออกจากรหัสต่อไปนี้ แต่คุณจะพบมันใน GitHub Repo ที่มาพร้อมกับบทความนี้ .

ในการสร้าง ID ที่ไม่ซ้ำกันสำหรับแต่ละคอร์ดเราสร้างการรวมสตริงของค่าดัชนีของ Avenger ที่ปลายแต่ละด้านของคอร์ด D3's d3.layout.chord ตั้งค่าหนึ่ง (ของเวนเจอร์ส) เป็นเสมอ แหล่งที่มา และอื่น ๆ เป้าหมาย ซึ่งทำให้คู่ที่ไม่ซ้ำกัน ต่อมาเมื่อวาดคอร์ดเราสามารถใช้เทคนิคเดียวกันเพื่อเรียกการไล่ระดับสีที่ถูกต้อง

 var grads = svg.append ("defs") selectall ("lineargradient")
.data (chord.chords ())
.Enter () ผนวก ("LineArgradient")
.attr ("ID", ฟังก์ชั่น (d) {ส่งคืน "gradientchord-" + d.source
ดัชนี + "-" + d.target.index; })
.attr ("Gradientununits", "userspaceonuse")
// ตำแหน่งพิกเซลของปลายด้านหนึ่งของคอร์ด
.attr ("x1", ฟังก์ชั่น (d, i) {ส่งคืน / * ... ตรีโกณมิติอิงจาก
d. ค่า source ... * /; })
.attr ("Y1", ฟังก์ชั่น (D, I) {ส่งคืน / * ... * /})
// ตำแหน่งพิกเซลของอีกปลายหนึ่งของคอร์ด
.attr ("x2", ฟังก์ชั่น (d, i) {ส่งคืน / * ... * /})
.attr ("Y2", ฟังก์ชั่น (D, I) {ส่งคืน / * ... * /}); 

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

 Grads.append ("หยุด")
.attr ("ชดเชย", "0%")
.attr ("สีหยุด", ฟังก์ชั่น (d) {ส่งคืนสี (d.source.index);
});
Grads.append ("หยุด")
.attr ("ออฟเซ็ต", "100%")
.attr ("สีหยุด", ฟังก์ชั่น (d) {ส่งคืนสี (d.target.index);
}); 

สิ่งที่เหลืออยู่คือการเรียก ID ไล่ระดับสีที่เหมาะสมในขณะที่ตั้งค่าสไตล์การเติมของคอร์ด (ด้วยฟังก์ชั่นเดียวกันกับที่เราใช้ในการตั้งค่ารหัสไล่ระดับสี)

การปัดเศษขึ้น

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

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

อย่าพลาดเซสชั่นของ Nadieh SVG นอกเหนือจากรูปร่างเพียงแค่สร้างลอนดอนวันที่ 21-23 กันยายน จองตอนนี้ !

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ปัญหา 280; ซื้อที่นี่ !