D3'te işlev değişmezinde "d" kullanımı?

Question

Javascript'in sözdizimi/dilbilgisi hakkında çok fazla bilgi sahibi olmadan kendime D3 öğretiyorum. "d" işlevini aşağıdaki işlev değişkeni içinde bir parametre olarak açıklayabilir misiniz?

Üzerinde çalışılan veri kümesini işaret ettiğini ancak bunun arkasındaki dilbilgisini anlamak istediğimi görüyorum.

d3.selectAll("circle") 
     .attr("cy",function (d) { return percent_scale(d.late_percent);}) 
     .attr("cx",function (d) { return time_scale(d.time);}) 
     .attr("r",1); 

Answer 1

Bu, adlandırılmış bir etiket verilmeyen bir işlev olan anonim işlev olarak adlandırılır. Javascript'teki anonim işlevler, her şey gibi nesnelerdir ve bu yüzden bunları diğer javascript işlevlerine parametre olarak iletebilirsiniz.

d3 durumunda, ikinci bir parametre olarak bir işlev iletmenize izin verir. Bulunduğunuz gibi, bu fonksiyon mevcut veri elemanının yanı sıra mevcut veri elemanının indeksi ile çağrılacaktır. İkinci parametre bir işlev değilse, bunun yerine bir değer kullanabilir. Örnekte

:

d3.selectAll("circle") 
     .attr("cy",function (d) { return percent_scale(d.late_percent);}) 
     .attr("cx",function (d) { return time_scale(d.time);}) 
     .attr("r",1); 

Hem cy

ve cx olan r statik değeri atanır edilirken, anonim bir fonksiyon çağrısının dönüş değerine dayalı atanan değerler olmak. Ben anonim işlevini yerini ettik İşte

function setY(d) { return percent_scale(d.late_percent);} 

function setX(d) { return time_scale(d.time); } 

d3.selectAll("circle") 
     .attr("cy", setY) 
     .attr("cx", setX) 
     .attr("r",1); 

daha standart fonksiyon tanımlarla çağırır ve işlevinin adı d3 çağrısında çağrılacak belirtilen: Biz bu yeniden başladı. Bu tam olarak önceki gibi çalışır. Ayrıca bu durumda d hakkında büyülü hiçbir şey olmadığını unutmayın. Bu kod da aynı şeyi yapacaktır. Parametreyi d'dan foo'a değiştirdiğimi unutmayın, ancak bu yalnızca işlev içindeki parametreye nasıl eriştiğinizi değiştirir. Fonksiyon çağrısının dışında hiçbir etkisi yoktur. Genellikle d3 belgelerinde ve öğreticilerinde, geçerli veri öğesi için d ve geçerli veri öğesinin indeksi için kullanılan i göreceksiniz. endeks şöyle işlev çağrılarına ikinci eleman olarak geçirilir:

function setY(d, i) { return percent_scale(d.late_percent);} 

function setX(d, i) { return time_scale(d.time); } 

d3.selectAll("circle") 
     .attr("cy", setY) 
     .attr("cx", setX) 
     .attr("r",1); 

Şimdi özellikle d3 durumda:

// Select all of the 'circle' elements (that is <circle>) elements 
// in the HTML document and put the associated data into an array 
d3.selectAll("circle") 

     // For each circle element, set the Y position to be the result 
     // of calling percent_scale on the data element late_percent 
     .attr("cy",function (d) { return percent_scale(d.late_percent);}) 

     // For each circle element, set the X position to be the result 
     // of calling time_scale on the data element time 
     .attr("cx",function (d) { return time_scale(d.time);}) 

     // For each circle element, set the radius to be 1 
     .attr("r",1); 

Bu d3 çok yaygın bir yapıdır. İlk adım her zaman, değiştirmek istediğiniz eleman kümesini tanımlamak için bir seçim yapmaktır (bu, bu durumda .seectAll'dir). Bundan sonra, elemanlara istenen değişiklikleri gerçekte gerçekleştiren ek çağrıları (bu durumda .attr çağrıları) zincirleyebilirsiniz.

Bu, veri öğelerini manuel olarak izlemek zorunda kalmadan veya çok sayıda döngü oluşturmak zorunda kalmadan veriye dayalı belgelerle (grafikler, çizelgeler vb.) Çalışmak için çok güçlü bir yöntem oluşturur. Aslında, kodunuzda değişiklik öğeleriyle uğraşan döngüler varsa d3 yanlış kullandığınızı söyleyebilirsiniz.

Javascript ile çok fazla deneyiminiz yoksa, https://www.dashingd3js.com/'daki eğiticiler, d3 ile çalışmaya başlamak için yararlı olabilir.