ما الذي يجب أن أغيره في الكود أدناه بحيث يكون هناك ظل خافت تتركه كل دائرة خلفها أثناء تحريكها، والذي يتم مسحه في نهاية الرسم المتحرك:

/\*
\* main.js
\* إتقان تصور البيانات باستخدام D3.js
\* المشروع 2 - استنساخ جابميندر
\*/

هامش const = { اليسار: 100، اليمين: 10، الأعلى: 10، الأسفل: 100 }
العرض الثابت = 800 - الهامش.اليسار - الهامش.اليمين
الارتفاع الثابت = 500 - الهامش العلوي - الهامش السفلي

const svg = d3.select("#chart-area").append("svg")
 .attr("العرض"، WIDTH + MARGIN.LEFT + MARGIN.RIGHT)
 .attr("الارتفاع"، HEIGHT + MARGIN.TOP + MARGIN.BOTTOM)

// إنشاء كائن تلميح الأداة
نصيحة ثابتة = d3.tip()
 .attr("class"، "d3-tip")
 .إزاحة ([-10، 0])
 .html(د => {
 إرجاع `الدخل: $${d.venue}
متوسط ​​العمر المتوقع: ${d.life\_exp} سنوات`;
 });
const g = svg.append("g")
 .attr("تحويل", `ترجمة(${MARGIN.LEFT}, ${MARGIN.TOP})`)

دع الوقت = 0

// مقاييس
كونست س = d3.scaleLinear()
 .النطاق([0، العرض])
 .المجال([30000, 80000])

const y = d3.scaleLinear()
 .النطاق([الارتفاع، 0])
 .المجال([60, 90])

// تسميات
const xLabel = g.append("text")
 .attr("ص"، الارتفاع + 50)
 .attr("x"، العرض / 2)
 .attr("حجم الخط"، "20px")
 .attr("نص مرساة"، "وسط")
 .text("متوسط ​​دخل الأسرة ($)")
const yLabel = g.append("text")
 .attr("تحويل"، "تدوير(-90)")
 .attr("ص"، -40)
 .attr("x"، -170)
 .attr("حجم الخط"، "20px")
 .attr("نص مرساة"، "وسط")
 .text("العمر المتوقع (بالسنوات)")
const timeLabel = g.append("text")
 .attr("y"، الارتفاع - 15)
 .attr("x"، العرض - 45)
 .attr("حجم الخط"، "40 بكسل")
 .attr("التعتيم"، "1")
 .attr("نص مرساة"، "وسط")
 .نمط("اللون"،"#B21112")
 .نص("1980")

// المحور العاشر
const xAxisCall = d3.axisBottom(x)
 .tickValues(d3.range(30000, 80000, 10000))
 حجم القراد(10)
 .tickFormat(d3.format("$"));
ز.إلحاق("ز")
 .attr("الفئة"، "المحور المحوري")
 .attr("تحويل", `translate(0, ${HEIGHT})`)
 .نداء (xAxisCall)
 .selectAll(".نص العلامة")
 .style("font-size", "12px");

// المحور ص
const yAxisCall = d3.axisLeft(y)
 .tickValues([60,65,70,75,80,85,90])
 حجم القراد(10)
ز.إلحاق("ز")
 .attr("فئة"، "yaxis")
 .الاتصال (yAxisCall)
 .selectAll(".نص العلامة")
 .style("font-size", "12px");

// استدعاء تلميح الأداة في حاوية SVG
g.call(نصيحة);
const xGridlines = d3.axisBottom(x)
 .tickValues([30000,40000,50000,60000,70000,80000])
 .tickSize(-HEIGHT)
 .tickFormat("")

const yGridlines = d3.axisLeft(y)
 .tickValues([60,65,70,75,80,85,90])
 .tickSize(-WIDTH)
 .tickFormat("")

ز.إلحاق("ز")
 .attr("الفئة"، "الشبكة")
 .attr("تحويل", `translate(0, ${HEIGHT})`)
 .الاتصال (xGridlines)

ز.إلحاق("ز")
 .attr("الفئة"، "الشبكة")
 .الاتصال (yGridlines)

// أضف أساطير

أسطورة const = g.append("g")
 .attr("transform", `translate(0, ${HEIGHT + 50})`);

legend.append("المستقيم")
 .attr("س"، 0)
 .attr("ص"، 0)
 .attr("العرض"، 10)
 .attr("الارتفاع"،10)
 .attr("ملء"، "#003A63")
أسطورة.إلحاق ("نص")
 .attr("x"، 20)
 .attr("ص"، 10)
 .text("الأميركيون الأفارقة")

legend.append("المستقيم")
 .attr("س"، 0)
 .attr("ص"، 20)
 .attr("العرض"، 10)
 .attr("الارتفاع"،10)
 .attr("ملء"، "#C79316")
أسطورة.إلحاق ("نص")
 .attr("x"، 20)
 .attr("ص"، 30)
 .text("الأمريكيون البيض")

legend.append("المستقيم")
 .attr("س"، 0)
 .attr("ص"، 40)
 .attr("العرض"، 10)
 .attr("الارتفاع"،10)
 .attr("ملء"، "#B21112")
أسطورة.إلحاق ("نص")
 .attr("x"، 20)
 .attr("ص"، 50)
 .text("جميع الأجناس")

d3.json("data/current\_data.json").then(function(data){
 // بيانات نظيفة
 const formattedData = data.map(year => {
 سنة العودة["السباقات"].filter(race => {
 البيانات الثابتة موجودة = (العرق. الدخل && العرق. الحياة\_exp)
 إرجاع البيانات موجود
 }).map(السباق => {
 العرق.الدخل = الرقم(العرق.الدخل)
 Race.life\_exp = الرقم(race.life\_exp)
 سباق العودة
 })
 })

 // قم بتشغيل الكود كل 0.1 ثانية
 d3.interval(وظيفة(){
 الوقت = (الوقت <formattedData.length-1)؟ الوقت + 1 : 0
 التحديث (البيانات المنسقة [الوقت])
 timeLabel.text(سلسلة (الوقت + 1980))
}، 150)

 // التشغيل الأول للتصور
 التحديث (البيانات المنسقة[0])
})

تحديث الوظيفة (البيانات) {
 // وقت الانتقال القياسي للتصور
 ثابت ر = d3.transition()
 المدة(500)
 .ease(d3.easeLinear)

 

 // ربط البيانات الجديدة بالعناصر القديمة.
 دوائر ثابتة = g.selectAll("دائرة")
 .data(data, d => d.race)

 // الخروج من العناصر القديمة غير الموجودة في البيانات الجديدة.
 الدوائر.الخروج ().إزالة ()

 // أدخل العناصر الجديدة الموجودة في البيانات الجديدة.
 Circles.enter().append("دائرة")
 .attr("الفئة"،"الدائرة")
 .attr("ملء"، د => {
 إذا (د. السباق === "أبيض") {
 إرجاع "#C79316" ؛
 } وإلا إذا (d.race === "أسود") {
 إرجاع "#003A63";
 } وإلا إذا (d.race === "الكل") {
 إرجاع "#B21112";}
})
 .on("تمرير الماوس"، Tip.show)
 .on("خروج الماوس"، نصيحة.إخفاء)
 .دمج(دوائر)
 .الانتقال(ر)
 .attr("cy", d => y(d.life\_exp))
 .attr("cx", d => x(d.venue))
 .attr("ص"، 25)

 // تحديث تسمية الوقت
 timeLabel.text(سلسلة (الوقت + 1980))
 }
{"evolved_from": null, "kind": "human", "source": "ewof/sharegpt-instruct-unfiltered-deduped"}