D3.JS được tham chiếu đến dữ liệu ràng buộc của đối tượng nhấp

Question

Tôi là một newbie để javascript và D3.js

tôi đang làm việc với quân Directed Graph Ví dụ tại https://gist.github.com/4062045

tôi cần để có được một tài liệu tham khảo để dữ liệu bị ràng buộc của phần tử vòng tròn được nhấp để tôi có thể thêm liên kết vào nó.

Tôi có dòng sau mã trong handler click của vòng tròn:

d3.select(this).each(function(d){console.log(d)}); 

tôi có thể in các đối tượng để an ủi nhưng tôi không thể tìm ra cách để có được một tham chiếu đến đối tượng này để Tôi có thể đẩy nó vào một đối tượng liên kết như:

{source: <reference to node should go here>, target: some_other_node} 

Đánh giá cao những người giúp đỡ của bạn!

Answer 1

circles.on('click', datum => { 
    console.log(datum); // the datum for the clicked circle 
}); 

#lựa chọn. trên (typenames [, nghe [, chụp]])

Khi một sự kiện quy định được cử vào một nút chọn, người nghe chỉ định sẽ được đánh giá cho mỗi phần tử được lựa chọn, được thông qua chỉ số hiện tại (d), chỉ mục hiện tại (i) và nhóm hiện tại (các nút), với điều này là phần tử DOM hiện tại.

Answer 2

Đối với lợi ích của người mới khác trên mạng, đây là cách tôi giải quyết này:

//Register the event handler with you selection 
myselection.on("click", click); 

//Obtain reference to data of currently clicked element by obtaining the first argument of  the event handler function 

function click(element){ 
    console.log(element); 
} 

Answer 3

Đây là giải pháp của tôi:

/* CSS used in Javascript snippet */ 
.source { 
    stroke-width: 3px !important; 
    stroke-opacity: 1; 
    stroke: #0f0; 
} 

.target { 
    stroke-width: 3px !important; 
    stroke-opacity: 1; 
    stroke: #f00; 
} 


// this goes inside the d3.json call 
node.on("mouseover", function() { 
    idx = this.__data__.index 
    for (i = 0; i < graph.links.length; i++) { 
    if (graph.links[i].source.index == idx) { 
     link[0][i].classList.add("source"); 
    } 
    else if (graph.links[i].target.index == idx) { 
     link[0][i].classList.add("target"); 
    } 
    else { 
     link[0][i].classList.remove("source"); 
     link[0][i].classList.remove("target"); 
    } 
    } 
}); 

Ý tưởng là, trên trigering của một cho sự kiện, bạn sẽ xem qua danh sách các liên kết và đánh dấu (thêm một lớp) vào mỗi một nguồn có hoặc đích phù hợp với chỉ mục được tìm thấy trong dữ liệu của một nút nhất định. Nó có khả năng không phải là làm tất cả mọi thứ d3 có khả năng làm, nhưng nó không yêu cầu thêm thư viện và tôi nhận được nhanh chóng làm nổi bật các liên kết nguồn/mục tiêu của tôi.