Data Visualization için D3.js Neden

Veri görselleştirme, ham sayılar ve insan anlayışı arasındaki boşluğu köprüler. Mevcut birçok araç arasında, D3.js (Data-Driven Documents), geliştiricilere sınırlı sayıdaki USB kullanıcısına doğrudan kontrol veren, otomatik olarak erişilebilir olan veri kümelerine ve veri kümelerine uygun olarak kullanılan görsel gösterimi sağlar. D3, tam olarak ihtiyacınız olan görsel gösterimini sağlar - basit bar grafiklerden karmaşık coğrafi haritalarına ve ağ diyagramlarına kadar.Veri tabanlı JavaScript kütüphanesini otomatik olarak gösterir.

D3.js'in Temel Kavramları

D3'ü etkin bir şekilde kullanmak için temel prensiplerini anlamanız gerekir: seçimler, veri bağlayıcısı, ölçekler ve SVG. D3, DOM elementlerini seçerek, dönüşümleri uygulamanız ve uygulamanız yoluyla çalışır.Bu model yöntem zinciri ile ifade edilir ve basit bir örnekle gösterilir.

Seçmeler ve Data Binding

D3 CSS seçicilerini hedef elementleri kullanarak kullanır, sonra onlara verileri ekler.TheurFLT:0) yöntemi seçilmiş düğümlerle bir dizi değere katılır ve OLFLT:1, bu nedenle ilgili bir DOM düğümü olmayan herhangi bir veri puan için yeni elementler oluşturur.

Örneğin, bir veri kümesi için çevreler oluşturmak için:

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");

Ölçeği ve Axes

Ham verileri genellikle bir alan (tavap değerleri) bir dizi (piksel pozisyonların) şeklinde sıralanır ve D3, [[D3, [[DÜyesel koordinatlar ve [[DÜye değerler) ilerlenir.

lineer bir ölçek örneği:

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);

D3.js ile Etkileşimli Görselleştirmeler

Interactivity, statik grafiklere uygulanabilir hikayelere dönüşür. D3 olayı eller, geçişler ve dinamik güncellemeler destekler. Aracıtipleri, zoom, sürüklenme, filtreleme ve animasyonları en az yük ile genişletebiliriz. Aşağıda, aletlere genişletiyoruz ve diğer ortak etkileşimli özellikleri tanıtabilirsiniz.

Tooltips ve Highlighting

Tooltips, D3'ün etkinlik sistemini kullanarak, ayrıntıları gösteren bir yüzen bir süzge oluşturabilir. Örneğin, araç uçları ile bir bar grafiği genişleten bir bar grafiğini genişletin zaten orijinal kodda gösterildi; burada da aynı zamanda KAYITT:0color değişikliği).

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");
 });

Zoom ve Pan

Büyük veri setleri veya zaman serisi verileri için, kullanıcıların ilgi alanlarına odaklanmasına yardımcı olur. D3'ün 03.03.2011 Davranışları koordinat sistemini değiştirir.Görünüşeğini içeren bir SVG grubuna uygulayın.

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

svg.call(zoom);

Dinamik Data Updates

Etkileşimli panjurlar genellikle sayfayı yeniden yüklemeden veri yenilemeye ihtiyaç duyar. D3'ün güncelleme modeli zarif bir şekilde ekleme, kaldırma ve elemanları değiştirmek. anahtar yeni verilerle katılmak ve kullanım için www.D.T:13 kullanmak.)

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);
}

Gelişmiş D3 Teknikleri

Layouts and Geographic Visualizations

D3 karmaşık grafikler için özel bir düzen modülleri içerir: örneğin, bir güç yönlendirme ağı oluşturmak için gerekli kodu büyük ölçüde azaltır: D3, ağ grafikleri için fizik simülatörü, ARJSON kullanarak proje haritaları verileri.Bu modüller, örneğin, bir güç yönlendirme ağı oluşturmak için gerekli kodu büyük ölçüde azaltır:

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

Geçişler ve Animasyonlar

Fiber geçişler kullanıcı deneyimini geliştirir. D3'sFLÜ:19) Zaman içinde özellikleri değişir. Zaman içinde kontrol edebilirsiniz, kiralayabilir ve gecikme yapabilirsiniz. Örneğin, barlar büyümek için:

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);

Prodüksiyon için en iyi uygulamalar D3

Performans Optimizasyonu

Büyük veri setleri için (bir puanın çoğu), doğrudan DOM manipülasyonu yavaş hale gelir.UseENFLT:0)D3-canvas üzerinden yapılan veya D3BİLD:2[WebGL) Broşür gibi kütüphaneler için.gl. SVG tabanlı görseller için, DOM karmaşıklığını kullanarak ve her çerçevede her elementi güncellemekten kaçın.

Accessability and Responsiveness

Görselleştirmeler tüm kullanıcılar tarafından uygulanabilir olmalıdır.DANDÜŞEKLER İÇİNDEŞMELER, ARIA özelliklerini kullanarak ve bir geri dönüş olarak bir metin tabanlı tabloyu içerir.Sorulama tasarımı için, baz SVG boyutlarında konteynerin genişliği üzerinde D3 ile yeniden boyutlandırmak ve pencere yeniden boyutlandırmak.

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

Kod Organizasyonu

Tek sayfalı bir uygulamada bile, D3 kodunuzu modüllere yapılayın: Bir veri toplama için, ölçekler / aksaklar için bir tane çizim için ve bir etkileşim için ES6 modüller veya Webpack gibi bir paket kullanın. D3 mantık karıştırmaktan doğrudan; bunun yerine, çerçeve aramalarınız için bir D3 sınıf oluşturun.

D3'ü Modern Çerçevelerle bütünleştirmek

Reaks, Angular ve Vue, çatışmalardan kaçınmak için, D3'ü sadece hesaplamalar (öldürücüler, şekiller) kullanmak ve SVG'yi alternatif olarak etkinleştirin, D3'ün verimli güncelleme döngülerinin çerçeveden ayrı tutulmasına izin verebilirsiniz.

Gerçek Dünya Örnekleri ve Vakaları Kullanın

D3 birçok yüksek profilli görselleştirme projesi: D3, Pratik veri veya gerçek zamanlı IoT sensörleri için özel panjurlar sağlar.In Enterprise settings, D3 gibi özel veri hikayeleri için D3 kullanır.In corporate settings, D3 finansal veriler veya gerçek zamanlı IoT sensörü beslemeleri için özel panjur türlerini bir araya getirir.

Örnek: İnteraktif Scatter Plot with Tooltips and Brushing

x, y ve kategori ile 500 puan veri kümesi düşünün. D3 kullanarak kategoriye renkli bir çizgi oluşturabilirsiniz, tam koordinatları gösteren bir araçtip ve seçilen noktaları gösteren bir fırça.The code structure follow the patterns above.TheYu etkileşimi would look:

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);
 }
}

Öğrenme Kaynakları ve Sonraki Adımlar

D3'e hakim olmak için resmi olarak kullanılabilir not defteri ile başlayın:0)D3.js belgesi) ve Scott Murray) tarafından ayrıntılı bir giriş için kullanılabilir[DD3.) Uygulamayı yeniden kullanarak, çizilebilir notlar ile çalışın, o zaman ağaç haritaları için meditasyon yapın.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

D3.js, web'de özel etkileşimli veriler için altın standardı olarak kalır. dik öğrenme eğrisi, performans ve topluluk desteği ile uyumludur. Temel konseptlerini ustalaştırmaya hazırlayarak - genişletilebilir ve erişilebilir görselleştirmeler - görselleştirmeler oluşturabilirsiniz - verileri fikirlendirmeler. Basit bir bar grafiği inşa etmek veya karmaşık bir multi-view panjur, D3, üretim hazırlığı oluşturmak için araçları verir.