SVG gradients کے ساتھ D3.js چارٹ بڑھانے

نادیہ بریمر ہو جائے گا لندن پیدا ستمبر میں، وہ کس طرح لے جانے کا مظاہرہ کریں گے صرف سائز کے باہر SVG ، جاوا اسکرپٹ، سی ایس ایس اور d3.js کا استعمال کرتے ہوئے ڈیٹا بصیرت بھی زیادہ مزہ اور دلچسپ بنانے کے لئے. اب آپ کی ٹکٹ کتاب !

D3.js نے انٹرایکٹو ڈیٹا کے نقطہ نظر کی دنیا میں لے لیا ہے. مثال کے طور پر ایک بہت بڑی تعداد پایا جا سکتا ہے، ہر لائبریری پر اپنے مزہ اور مفید موڑ کو ظاہر کرنا. آپ دیکھتے ہیں، D3 ایک چارٹنگ لائبریری نہیں ہے، لیکن کچھ بہتر ہے. یہ آپ کو صرف اعداد و شمار کے بصیرت پیدا کرنے کے لئے صرف بنیادی آلات فراہم کرتا ہے، اور ایسا کرنے میں آپ کو عملی طور پر جو کچھ آپ سوچ سکتے ہیں وہ تخلیق کرنے کے قابل بناتا ہے. اگرچہ کچھ خیالات دوسروں کے مقابلے میں زیادہ وقت لگ سکتے ہیں، تو آپ آخر میں وہاں جائیں گے. اور یہ آزادی بالکل وہی ہے جو میں D3 کے بارے میں محبت کرتا ہوں.

اس کے بنیادی طور پر، ہر D3 بصری SVG عناصر سے باہر بنایا گیا ہے. مثال کے طور پر، ایک scatterplot چارٹ میں ہر ڈیٹا بیس کے لئے، ایک بار چارٹ بنانے کے لئے، ایک محور، متوازی سمتوں یا ڈھال گراف کے طور پر، لیبل کے طور پر، اور عملی طور پر ہر چیز کے لئے انتہائی مفید. مزید برآں، SVGs قرارداد آزاد ہیں، اس طرح کسی بھی ڈسپلے یا زوم کی سطح پر بہت اچھا لگ رہا ہے.

یہاں تک کہ اگر آپ صرف ان کے سائز کے لئے SVGs استعمال کر رہے ہیں، تو آپ شاندار نظریات بنا سکتے ہیں. تاہم، وہ بہت زیادہ کر سکتے ہیں - مثال کے طور پر SVG فلٹرز کے بارے میں سوچتے ہیں. اس سبق میں، ہم ایک مخصوص پہلو میں ایک گہری ڈوب لے جائیں گے اور چند مختلف طریقوں کو نظر انداز کریں گے جو یہ ایک نقطہ نظر کو روشن کرنے کے لئے لاگو کیا جا سکتا ہے. مجھے آپ کو SVG gradients میں متعارف کرانے دو

اس سبق کے لئے آپ کی ضرورت تمام فائلوں کو تلاش کریں یہاں .

لکیری gradients.

کبھی کبھی جب میں ایک لائن کے ساتھ ایک لائن چارٹ بناتا ہوں تو یہ صرف تھوڑا سا خالی محسوس ہوتا ہے اور سفید پس منظر پر کھو سکتا ہے. یہ زیادہ سے زیادہ کھڑے ہونے کے لئے، میں D3 کے استعمال سے نیچے ایک ہلکے مریض رکھتا ہوں d3.svg.area. فنکشن، SVG گریجویٹ سے بھرا ہوا (FIG 1 دیکھیں).

میں چاہتا ہوں کہ عمودی طور پر اوپر سے عمودی طور پر چلانے کے لئے (جہاں یہ ایک ہی رنگ ہے لیکن ایک ہلکا سایہ ہے) نیچے (جہاں یہ سفید، یا شفاف بننا چاہئے). یہ ایک لکیری تدریسی کے طور پر جانا جاتا ہے؛ کچھ براہ راست لائن کے ساتھ رنگ تبدیل کرتا ہے.

ہم SVG کے ساتھ شروع کرتے ہیں. یہ کینوس ہے جس پر ہماری لائن چارٹ تیار کی جائے گی. پھر ہم ایک تخلیق کرتے ہیں Defs. عنصر جس پر ہم A شامل کر سکتے ہیں linargradient. عنصر. گریجویٹ ایک منفرد شناخت دینے کے لئے یہ بہت اہم ہے - ہم اس کے بعد استعمال کریں گے جب ہمیں اس علاقے کو بھرنے کے نیچے علاقے کو دینے کی ضرورت ہے.

 Var AriveGradient = SVG.Append ("Defs")
.append ("lineargradient")
.ٹرٹر ("ID"، "علاقائی گریجویٹ")
.ٹرٹر ("X1"، "0٪"). att ("y1"، "0٪")
.attr ("x2"، "0٪"). att ("Y2"، "100٪")؛ 

مندرجہ بالا کوڈ کی آخری دو لائنوں کی وضاحت کی گئی ہے کہ کس طرح مریض چلانا چاہئے. ایک پوشیدہ لائن کے طور پر اس کے بارے میں سوچو: x1. اور y1. پوشیدہ لائن اور ابتدائی پوزیشنیں ہیں x2. اور Y2. اس کے اختتام نقطہ کی نشاندہی، مریض کی سمت دینے کے لئے. یہ فی صد کے طور پر ان کی وضاحت کرنے میں اکثر آسان ہے، اگرچہ یہ درست پکسل مقامات کا استعمال کرنا ممکن ہے. پہلے سے طے شدہ طور پر مقامات عنصر کے پابند باکس کا حوالہ دیتے ہیں جس پر گریجویٹ لاگو ہوتا ہے. ہم عمودی طور پر چلانے کے لئے گریجویٹ چاہتے ہیں، لہذا x1. اور x2. ایک ہی ہونا چاہئے ( 0٪ ٹھیک ہے)، y1. ہونا ضروری ہے 0٪ اور Y2 100٪ .

اب ہم مریضوں کے رنگ کی وضاحت کرسکتے ہیں. کم سے کم دو رنگوں کو ایک تدریسی کے لئے ضروری ہے، لیکن آپ جیسے ہی آپ کو پسند کرتے ہیں استعمال کرسکتے ہیں. ہر رنگ کے لئے گریجویٹ میں آپ کو شامل کریں سٹاپ عنصر. اس کے اندر آپ کے ساتھ سایہ کی وضاحت سٹاپ رنگ ، اور مقام (پوشیدہ لائن کے ساتھ) جہاں آپ چاہتے ہیں کہ یہ رنگ خالص (صحیح رنگ) ہو آفسیٹ .

اختیاری، ہم ہر رنگ کی دھندلاپن بھی مقرر کر سکتے ہیں بند کرو . یہاں میں سب سے اوپر اور مکمل طور پر شفاف پر تھوڑا سا ہلکا سایہ بنا رہا ہوں.

ariogradient.append ("سٹاپ")
.ٹرٹر ("آفسیٹ"، "0٪")
.ٹرٹر ("سٹاپ رنگ"، "# 21825C")
.ٹرٹر ("سٹاپ - دھندلاپن"، 0.6)؛
ariogradient.append ("سٹاپ")
.ٹرٹر ("آفسیٹ"، "80٪")
.ٹرٹر ("سٹاپ رنگ"، "سفید")
.ٹرٹر ("سٹاپ - دھندلاپن"، 0)؛ 

اب لکیری تدریسی قائم کی گئی ہے، ہم ایک علاقے چارٹ بنا سکتے ہیں اور اسے گریجویٹ کے ساتھ بھر سکتے ہیں. ایسا کرنے کے لئے، استعمال یو آر ایل (# گریجویٹ ID) بھرنے کے انداز میں، ہم نے پہلے ہی منفرد ID کے ساتھ ساتھ مقرر کیا.

 SVG.Append ("راستہ")
.style ("بھریں"، "URL (#areAgradient)")
.ٹرٹر ("ڈی"، علاقائی (ڈیٹا بیس)؛ 

اس کے بعد، چارٹ کے اس علاقے کے سب سے اوپر لائن کو ڈراو تاکہ ناظرین اپنے گراف سے نتائج پڑھ سکیں. میرے چارٹ میں، میں نے حلقوں کو بھی مخصوص ڈیٹا پوائنٹس کے مقامات پر زور دیا ہے.

ایک ہموار علامات

اعداد و شمار کے بصیرت میں کنودنتیوں بہت عام ہیں. جب آپ اپنے اعداد و شمار کے ایک خاص پہلو کی نمائندگی کرنے کے لئے رنگ استعمال کررہے ہیں، تو آپ کو ہر رنگ کا مطلب یہ ہے کہ اس کی وضاحت کرنے کی ضرورت ہے. یہ ہے جہاں ایک افسانوی اندر آتا ہے.

کچھ چارٹ میں، آپ کو ڈس کلیمر معاملات (مثال کے طور پر، مختلف ممالک) کے درمیان تبعیض کرنے کے لئے رنگ کا استعمال کیا جائے گا، جس میں رنگ اکثر اکثر مختلف ہوتے ہیں. تاہم، آپ کو کم مقدار کی قیمت کی نشاندہی کرنے کے لئے رنگ بھی استعمال کر سکتے ہیں.

یہاں ہم درجہ حرارت کی نمائندگی کرتے ہیں (FIG 2 دیکھیں). رنگ آہستہ آہستہ درجہ حرارت کی نشاندہی کرنے کے لئے آہستہ آہستہ تبدیل کرتا ہے. یہ ایک افسانوی میں دکھانے کے لئے، ہم ایک طویل آئتاکار بنانے کے لئے جا رہے ہیں اور بائیں سے دائیں طرف سے گریجویٹ کے ساتھ اسے بھرنے کے لئے جا رہے ہیں. ہم ہمارا لائن چارٹ کے لئے تخلیق کردہ گریجویٹ دوبارہ استعمال کر سکتے ہیں، لیکن 90 ڈگری کی طرف سے فلپ (تو x2. اب چلتا ہے 100٪ ، بجائے اس کے Y2. ). اگرچہ عام طور پر ایک اندردخش پیلیٹ ڈیٹا کی نظر بندی میں سفارش نہیں کی جاتی ہے، لوگوں کو رنگا رنگ درجہ حرارت کے نقشے کو دیکھنے کے لئے استعمال کیا جاتا ہے، اور میں نے اپنے مثال میں استعمال کرنے کے لئے نو رنگوں کو منتخب کیا ہے.

ہر ایک لکھنے کے بجائے سٹاپ ضم کرنے کے لئے، ہم تمام رنگوں کو ڈیٹا بیس میں ڈال سکتے ہیں اور D3 کے نائٹی استعمال کرتے ہیں ڈیٹا عمل کو تیز کرنے کے لئے قدم. D3 کے ساتھ یہ ممکنہ طور پر ایک گمنام تقریب کا استعمال کرتے ہوئے بعد میں چیننگ کے اقدامات میں ڈیٹا بیس کی کسی بھی ملکیت تک رسائی حاصل کرنے کے لئے ممکن ہے، اس طرح ہمیں صرف دو لائنوں میں رنگ اور آفسیٹ قائم کرنے کے قابل بناتا ہے.

 SVG.Append ("Defs")
.append ("lineargradient")
.ٹرٹر ("ID"، "legendgradientmulti")
.ٹرٹر ("X1"، "0٪"). att ("y1"، "0٪")
.ٹرٹر ("X2"، "100٪"). att ("Y2"، "0٪")
منتخب کریں ("سٹاپ")
.دیتا ([
{آفسیٹ: "0٪"، رنگ: "# 2C7BB6"}،
{آفسیٹ: "12.5٪"، رنگ: "# 00A6CA"}،
{آفسیٹ: "25٪"، رنگ: "# 00CCBBC"}،
{آفسیٹ: "37.5٪"، رنگ: "# 90eb9d"}
{آفسیٹ: "50٪"، رنگ: "# FFFF8C"}
{آفسیٹ: "62.5٪"، رنگ: "# F9D057"}
{آفسیٹ: "75٪"، رنگ: "# F29E2E"}
{آفسیٹ: "87.5٪"، رنگ: "# e76818"}،
{آفسیٹ: "100٪"، رنگ: "# D7191C"}]
.enter (). شامل کریں ("سٹاپ")
.attr ("آفسیٹ"، فنکشن (ڈی) {واپسی D.offet؛})
.ٹرٹر ("سٹاپ رنگ"، فنکشن (ڈی) {واپسی D.Color؛})؛ 

پہلے کی طرح، حتمی قدم ایک تخلیق کرنا ہے دلر اور اس منفرد مریض کی شناخت کا استعمال کرتے ہوئے اسے بھریں.

 SVG.Append ("RECT")
.ٹرٹر ("X"، 0) .ٹرٹر ("y"، 0)
.ٹرٹر ("چوڑائی"، 500) .ٹرٹر ("اونچائی"، 20)
.style ("بھریں"، "URL (#gendendGradientMulti)")؛ 

چارٹ ان کنودنتیوں کے ساتھ جانے کے بعد شاندار کام کے بعد تیار ہوتے ہیں www.weather-radials.com. 2015 میں نیویارک یا بیجنگ میں درجہ حرارت دکھا رہا ہے. ہر روز ایک رنگ کی لائن کی طرف سے اشارہ کیا جاتا ہے، اور ان لائنوں کو سرکلر گراف بنانے کے لئے ترتیب دیا جاتا ہے. مندرجہ ذیل افسانوی وضاحت کرتا ہے کہ ہر رنگ کا کیا مطلب ہے. ایک گراف ایک رنگ سے ایک دوسرے سے ایک دوسرے کے ساتھ، اور دیگر نو رنگوں کے ذریعے دوسری ترقی کرتا ہے.

ڈیٹا پر مبنی گرڈینٹ

پچھلے مثال کے طور پر اسی طرح سے، ہم ایک سے زیادہ gradients بھی تشکیل دے سکتے ہیں. اعداد و شمار کے ایک خاص پہلو پر مبنی، ہم ہر ڈیٹا پوائنٹ کے لئے ایک منفرد مریض بنا سکتے ہیں. میں نے اس نقطہ نظر کو ایک میں استعمال کیا Exoplanet نقطہ نظر ، جہاں ہر سیارے کو ستارہ کی تاریک طبقے پر مبنی تدریجی دی گئی تھی. میں نے ایک ذہنی شعبے کا اثر استعمال کیا تھا کہ یہ تاثرات کو مرکز میں ستارہ کی طرف سے روشن کیا گیا تھا.

تو چلو 90s پر واپس آتے ہیں اور فلیٹ حلقوں کا مجموعہ اپنے اپنے شمسی نظام میں 3D لگ رہا ہے جس میں ریڈیل گرڈینٹس (FIG 4) کے ساتھ سیارے کی نمائندگی کرتے ہیں. میں نے سیارے کے نام اور قطر پر مشتمل ایک چھوٹا سا ڈیٹا بیس بنایا ہے. ہر ایک کو ایک رنگ کی طرف سے عام کیا جائے گا، جس میں ہم ہر سیارے کے لئے ایک منفرد مریض بنانے کے لئے استعمال کریں گے.

 var gradientreadial = svg.append ("Defs")
.SELECTALL ("ریڈیلگرافڈ")
.دیتا (سیارے)
.Enter (). شامل کریں ("ریڈیلگرافڈ")
.ٹرٹر ("ID"، فنکشن (ڈی) {واپسی "fardient-" + d.Planet؛})
.ٹرٹر ("سی ایکس"، "15٪")
.ٹرٹر ("CY"، "50٪")
.ٹرٹر ("آر"، "85٪")؛ 

کوڈ یہاں تھوڑا سا مختلف ہے: سب سے پہلے ایک تدریسی عنصر کو ضم کرنے کے بجائے، ہم اب فوری طور پر ضم کرتے ہیں سیارے ڈیٹا بیس اور صرف اس کے بعد درج کیا ہم ایک تدریسی عنصر بناتے ہیں (اس معاملے میں ریڈیلگرافڈ ). اس طرح، ڈیٹا بیس میں ہر نقطہ کے لئے ایک گریجویٹ پیدا کیا جاتا ہے. اعداد و شمار پر اس کی بنیاد پر ہر نقطہ کی شناخت کو منفرد رکھیں. انڈیکس میں عام طور پر کام کرتا ہے، لیکن یہاں سیارے کا نام محفوظ ہے. اس بات کو یقینی بناتا ہے کہ ہم بعد میں صحیح مریض تک رسائی حاصل کرسکتے ہیں.

ایک ریڈیل گریجویٹ ایک لکیری ایک میں تھوڑا سا مختلف ہے. ہم اسے ایک SVG سرکل کے اسی طرح سے بناتے ہیں: اس مقصد کے ساتھ مریض کے مرکز کی فراہمی جس میں اس کا استعمال کیا جائے گا، اس کا استعمال کرتے ہوئے CX. اور cy. . یہ اقدار ڈیفالٹ 50٪ ، جو اعتراض کا مرکز ہے.

ایک طرف سے سیارے پر ایک ستارہ چمکنے والی ایک ستارہ کی ظاہری شکل کو ضم کرنے کے لئے، ہم بائیں طرف بائیں طرف کے مرکز کو منتقل کریں گے CX. کرنے کے لئے 15٪ . تدریسی کے ردعمل (جہاں ایک تدریسی سٹاپ 100٪ ختم ہونا چاہئے) کی طرف سے اشارہ کیا جاتا ہے آر . یہ بھی ڈیفالٹ ہے 50٪ ، لیکن ہماری وجہ سے CX. آفسیٹ، یہ اب ہے 85٪ تو یہ پورے دائرے کو بھرتا ہے.

ہم سیارے کے اعداد و شمار کا استعمال کرسکتے ہیں کہ رنگ بند ہوجائیں. اس علاقے کی ظاہری شکل کو تخلیق کرنے کے لئے جو رنگ پر چمکتا ہے 0٪ ہلکا ہونا چاہئے. کا استعمال کرتے ہوئے d3.rgb (). روشن (ک) مجھے الگ الگ رنگ کی وضاحت کرنے کی ضرورت نہیں ہے، کیونکہ D3 میرے لئے حساب کرے گا. قدر K. وضاحت کرتا ہے کہ میں کتنا ہلکا ہوں. ارد گرد 50٪ میں نے ڈیٹا بیس میں حقیقی رنگ مقرر کیا. کنارے پر میں ایک رنگ چاہتا ہوں جو تھوڑا سا سیاہ ہے، سایہ کی ظاہری شکل دیتا ہے. منطقی طور پر، وہاں بھی ہے d3.rgb (). سیاہ (ک) ہم استعمال کر سکتے ہیں.

 gradientRadial.append ("سٹاپ")
.ٹرٹر ("آفسیٹ"، "0٪")
.ٹرٹر ("سٹاپ رنگ"، فنکشن (ڈی) {
واپسی D3.RGB (D.Color) .برٹر (1)؛ })؛
gradientradial.append ("سٹاپ")
.ٹرٹر ("آفسیٹ"، "50٪")
.ٹرٹر ("سٹاپ رنگ"، فنکشن (ڈی) {واپس D.Color؛})؛
gradientradial.append ("سٹاپ")
.attr ("آفسیٹ"، "100٪")
.ٹرٹر ("سٹاپ رنگ"، فنکشن (ڈی) {
واپس D3.RGB (D.Color). ڈارکرر (2.5)؛ })؛ 

اگر آپ اس کو چلانے کے بعد ایچ ٹی ایم ایل کا معائنہ کرنا چاہتے تھے، تو وہاں آٹھ مختلف ریڈیل گرڈینٹس موجود ہوں گے. آخری، ہمیں آٹھ حلقوں کو پیدا کرنے کی ضرورت ہے، انہیں اعداد و شمار کی طرف سے وضاحت کے طور پر ایک ردعمل دے، اور انہیں صحیح تدوین کے ساتھ بھریں.

 svg.selectall (". سیارے")
.دیتا (سیارے)
.enter (). شامل کریں ("سرکل")
/ * کلاس، مقام اور ریڈیو صفات مقرر کریں ... * /
.style ("بھریں"، فنکشن (ڈی) {
واپسی "URL (# گریجویٹ-" + ڈیپلانیٹ + ")؛ })؛ 

میں نے بھی سورج کو بھی شامل کیا ہے، جس میں اس کا اپنا شعاعی تدریجی ہے، لیکن میں نے چھوڑ دیا ہے CX. ، cy. اور آر ڈیفالٹ ترتیب کے ساتھ 50٪ ایسا کرنے کے لئے کہ سورج کی طرح سورج کی طرف سے چمکتا ہے.

ایک ڈس کلیمر: اگرچہ تمام شعبوں کے ڈایا میٹر ایک دوسرے کے ساتھ درست ہیں، فاصلے بالکل مکمل طور پر باگس ہیں. اور مجھے افسوس ہے کہ Saturn کوئی بجتی نہیں ہے

واقعات کے ساتھ چل رہا ہے

اب ہم نے ابھی تک اعداد و شمار پر مبنی رنگ پہلوؤں کو مقرر کیا ہے، لیکن بہت زیادہ امکانات موجود ہیں. ہم اعداد و شمار پر مبنی عملی طور پر سب کچھ مقرر کر سکتے ہیں - یہاں تک کہ ہر مریض کی تعبیر بھی.

اس کی کوشش کرنے کے لئے، چلو ایک D3 Chord ڈایاگرام کو مارول سنیما کائنات (FIG 5) میں Avengers کے درمیان تعاون کے درمیان تعاون کو دکھایا. چھ avengers کے درمیان چلنے والے چاروں طرف فلموں کی تعداد کے مطابق سائز کے مطابق ہیں جن میں وہ دونوں ہوتے ہیں. ہم ان chords کو ایک سادہ لکیری تدریر کے ساتھ بھرنے کے لئے جا رہے ہیں، ایک avenger کے رنگ سے دوسرے کے ساتھ تبدیل کر رہے ہیں.

ایک کور عام طور پر بالکل افقی یا عمودی نہیں ہے. لہذا ہمیں x1 قائم کرنا پڑے گا، x2. ، y1. اور Y2. ہر ایوارڈ کے بیرونی آرک کے مقامات پر مبنی اقدار. یہ ڈیٹا ہمارے اصل ڈیٹا بیس میں نہیں ہے، لیکن اس کے بعد ہم نے اسے D3 کی فراہمی کی ہے d3.layout.chord. فنکشن، ہم ہر آرک کے آغاز اور اختتامی زاویہ پر مشتمل ایک نیا ڈیٹا بیس واپس مل جائے گا (جیسا کہ d.source.Startangle. اور d.target.endangle. ). یہ Dataset ہے جو ہم gradients بنانے کے دوران فراہم کرتے ہیں.

ہمیں پوشیدہ لائن کے پکسل کی پوزیشنوں کو جاننے کی ضرورت ہے جو ایک دوسرے کے ساتھ ایک دوسرے کے آخر میں چلتا ہے. اس کے بعد یہ دینے کے لئے استعمال کیا جاتا ہے X1، ..، Y2. ہر تدابیر کی خصوصیات. ہم ان پوزیشنوں کو واپس لینے کے لئے ہر ایوارڈ کے آرک کے ساتھ ساتھ چار ڈایاگرام اور محل وقوع کا استعمال کرتے ہوئے کچھ ٹگومومیٹری کو درخواست دے سکتے ہیں. مکمل trigonometric فارمولا مندرجہ ذیل کوڈ سے ہٹا دیا گیا ہے، لیکن آپ اسے تلاش کریں گے GitHub Repo جو اس مضمون کے ساتھ ہے .

ہر چار کے لئے ایک منفرد شناخت بنانے کے لئے ہم ایک چار کے ہر اختتام پر ایوارڈ کے انڈیکس کی قیمت کا ایک تار مجموعہ بناتے ہیں. D3 d3.layout.chord. ہمیشہ ایک (Avengers) کا تعین کرتا ہے ذریعہ اور دوسرا ہدف جو ایک منفرد جوڑی بناتا ہے. بعد میں، جب chords ڈرائنگ، ہم صحیح تدریسی کو کال کرنے کے لئے اسی ٹیکنالوجی کا استعمال کرسکتے ہیں.

 Var Grads = SVG.Append ("Defs"). منتخب کریں ("لینریگری")
.ڈاٹا (chord.Chords ())
.Enter (). شامل کریں ("lineargradient")
.attr ("ID"، فنکشن (ڈی) {واپسی "gradientchord-" + d.source.
انڈیکس + "-" + d.target.index؛ })
.attr ("" gradientunits "،" صارفینpaceonuse ")
// ایک چار کے آخر میں پکسل مقام
.ٹرٹر ("x1"، فنکشن (ڈی، I) {واپسی / * ... Trigonometry کی بنیاد پر
d.source اقدار ... * /؛ })
.ٹرٹر ("Y1"، فنکشن (ڈی، I) {واپسی / * ... * /})
// ایک چار کے دوسرے اختتام کے پکسل مقام
.ٹرٹر ("x2"، فنکشن (ڈی، I) {واپسی / * ... * /})
.ٹرٹر ("Y2"، فنکشن (ڈی، I) {واپسی / * ... * /})؛ 

چونکہ ہر ایوارڈ اس کے اپنے انڈیکس نمبر کی طرف سے بیان کیا جاتا ہے، ہم ایک رنگ کی تقریب بنا سکتے ہیں، رنگ ، یہ ہر اشتعال انگیز رنگ فی انڈیکس کی قیمت واپس کرتا ہے. یہ دو رنگ کو روکنے کے دوران صحیح رنگ کا حوالہ دیتے ہوئے آسان بناتا ہے.

 grads.append ("سٹاپ")
.ٹرٹر ("آفسیٹ"، "0٪")
.attr ("سٹاپ رنگ"، فنکشن (ڈی) {واپسی رنگ (D.Source.index)؛
})؛
grads.append ("سٹاپ")
.attr ("آفسیٹ"، "100٪")
.ٹرٹر ("سٹاپ رنگ"، فنکشن (ڈی) {واپسی رنگ (d.target.index)؛
})؛ 

جو کچھ باقی رہتا ہے وہ صحیح تدریسی ID کو کال کرنے کے لئے ہے جبکہ chords کے بھرنے کے انداز کو ترتیب دینے کے دوران (اسی طرح کے فنکشن کے طور پر ہم گریجویٹ ID کو قائم کرنے کے لئے استعمال کرتے تھے).

راؤنڈنگ اپ

اس ٹیوٹوریل کے دوران، ہم نے اعداد و شمار کے بصیرت میں SVG gradients استعمال کرنے کے لئے چار مختلف طریقوں کو دیکھا، لیکن ہمیشہ ایسی چیزیں موجود ہیں جو آپ کر سکتے ہیں. مریضوں کی حرکت پذیری کے ساتھ، آپ مثال کے طور پر، ایک دوسرے کے اعداد و شمار کے نقطہ نظر کے ایک حصے سے بہاؤ کو ضم کر سکتے ہیں.

تو اگلے وقت آپ ڈیٹا کے نقطہ نظر کو ڈیزائن کر رہے ہیں، آپ کی تخلیقی صلاحیتوں کو مفت چلائیں. d3.js کے ساتھ، آپ کو کیا خیال ہے کہ آپ کو کیا خیال ہے کہ آلے کی حدود ہیں. تھوڑا سا باکس سوچنے اور کوشش کے ساتھ، آپ سب سے زیادہ حیرت انگیز چیزیں بنا سکتے ہیں.

نادیہ کے اجلاس کو مت چھوڑیں، صرف سائز کے علاوہ SVG، لندن پیدا کرنے کے لئے، 21-23 ستمبر. اب کتاب !

یہ مضمون اصل میں شائع ہوا نیٹ میگزین مسئلہ 280؛ اسے خریدیں !