Veri merkezinden d3.js öğesi niteliklerine erişme?

Question

Ben zaten d3.js'in .data() işlevini kullanarak ekrana çizdim bazı belirli svg çevrelerin cx & cy özniteliklerine erişmeye çalışıyorum, herkes yardımcı olabilir mi? Erişmeye çalışan kod aşağıdadır.

d3.selectAll(".mynode").each(function(d, i){ 
    if(d.someId == targetId){ 
    console.log(d.attr("cx")); // just trying to demo my point, doesn't work 
    } 
} 

Ben & javascript d3.js için oldukça yeni, bu yüzden her durumda ön bu geri yaklaşıyorum eğer emin değilim ya da belki ben bir dahili çözümü kaçırmış olabilir?

Answer 1

Kodunuz gerçekten bulmak istediğiniz gibi svg DOM öğesinden o niteliği elde etmektir bir veri unsuru, bir svg niteliğini almaya çalışıyor:

console.log(d3.selectAll(".mynode").attr("cx")); 

Bu yalnızca size verecektir seçiminizin ilk sıfır olmayan öğesi için öznitelik;

d3.selectAll(".mynode").each(function(d, i){ 
    if(d.someId == targetId){ 
    console.log(d3.select(this).attr("cx")); 
    } 
} 

: Seçili olan tüm elementlerin özelliklerini erişen her işlevinde this kullanmak istiyorsanız,

console.log(d3.selectAll(".mynode").filter(_conditions_).attr("cx")); 

Veya: Ayrıca filter DOM öğesini almak için seçim arıyoruz edebilirsiniz

Answer 2

Kabul edilen yanıttaki filtre yöntemi doğru. Kabul edilen yanıttaki ikinci yaklaşım (.each kullanarak) yanlıştır ve soru sorucunun yaptığıyla aynı hatayı içerir: if .data() çağrılmıyorsa (burada durum böyle ise), ilk argüman d. undefined (ve mevcut dom node değil), kendim de dahil olmak üzere tüm yeni başlayanlar, bekleyecektir); Geçerli dom node d3.select (this) üzerinden alırsınız, ki bu en sondaki if deyiminde doğrudur - hata test koşulundadır. Doğru versiyon aşağıdaki gibidir.

d3.selectAll(".mynode").each(function(d,i){ 
    var elt = d3.select(this); 
    if (elt.attr("id") == "yourTargetIdGoesHere"){ 
     console.log(elt.attr("cx")); 
    } 
}); 

keman: fiddle (iki sürümde, yani filtre ve herbirini içeren kodu)

GÜNCELLEME: Eğer kod vermedi beri cevabım,) siz .Data (kullanmıyordu varsayarak oldu bunun için; Daha sonra, veri yapınıza bağlı olarak, d.attr ("cx") düz d.cx ile değiştirilmesi durumunda, bu durumda .data()

kullanımınızı yazdığınızı gördüm.

Answer 3

daha basit bir yolu vardır:

d3.selectAll("circle")[0][i].attributes.cx.value 

(sağlama endeksi i verilir) o here görülebileceği gibi.