डी 3 जावास्क्रिप्ट लाइब्रेरी

Question

में क्लिक ईवेंट प्राप्त करने में असमर्थ मैं एक बल निर्देशित मार्कर के रूप में डेटा प्रदर्शित करने के लिए डी 3 जावास्क्रिप्ट लाइब्रेरी का उपयोग कर रहा हूं। यह बढ़िया काम करता है। लेकिन मैं सर्कल में क्लिक इवेंट जोड़ने में असमर्थ हूं। इसलिए जब मैं सर्कल पर क्लिक करता हूं, तो मुझे सर्कल का विस्तृत विश्लेषण मिलता है और इसे एक मॉडल बॉक्स में प्रदर्शित करता है।

var links = [{source: "x", target:"y", type: "paid"},......]'; 

var nodes = {}; 

// Compute the distinct nodes from the links. 
links.forEach(function(link) { 
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); 
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); 
}); 

var w = 950, 
    h = 500; 

var force = d3.layout.force() 
    .nodes(d3.values(nodes)) 
    .links(links) 
    .size([w, h]) 
    .linkDistance(60) 
    .charge(-300) 
    .on("tick", tick) 
    .start(); 

var svg = d3.select("#graph").append("svg:svg") 
    .attr("width", w) 
    .attr("height", h); 

// Per-type markers, as they don't inherit styles. 
svg.append("svg:defs").selectAll("marker") 
    .data(["suit", "licensing", "resolved"]) 
    .enter().append("svg:marker") 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 

var path = svg.append("svg:g").selectAll("path") 
    .data(force.links()) 
    .enter().append("svg:path") 
    .attr("class", function(d) { return "link " + d.type; }) 
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); 

var circle = svg.append("svg:g").selectAll("circle") 
    .data(force.nodes()) 
    .enter().append("svg:circle") 
    .attr("r", 6) 
    .call(force.drag); 

var text = svg.append("svg:g").selectAll("g") 
    .data(force.nodes()) 
    .enter().append("svg:g"); 

// A copy of the text with a thick white stroke for legibility. 
text.append("svg:text") 
    .attr("x", 8) 
    .attr("y", ".31em") 
    .attr("class", "shadow") 
    .text(function(d) { return d.name; }); 

text.append("svg:text") 
    .attr("x", 8) 
    .attr("y", ".31em") 
    .text(function(d) { return d.name; }); 

// Use elliptical arc path segments to doubly-encode directionality. 
function tick() { 
    path.attr("d", function(d) { 
    var dx = d.target.x - d.source.x, 
     dy = d.target.y - d.source.y, 
     dr = Math.sqrt(dx * dx + dy * dy); 
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 
    }); 

    circle.attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
    }); 

    text.attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
    }); 
} 

मैं var circle करने के लिए .on("click", 'alert(\'Hello world\')') जोड़ने की कोशिश की। यह उम्मीद के रूप में काम नहीं करता है। यह क्लिक पर लोड पर अलर्ट करता है।

मैं किसी भी मदद की सराहना करते हैं

Answer 1

इस प्रयास करें:

var circle = svg.append("svg:g").selectAll("circle") 
    .data(force.nodes()) 
    .enter().append("svg:circle") 
    .attr("r", 6) 
    .on("click", function(d,i) { alert("Hello world"); }) 
    .call(force.drag); 

Answer 2

इस बाहर की कोशिश करो, अगर आप नोड सर्कल के भीतर निहित चाहते हैं (मान लें कि आपके नोड्स एक महत्वपूर्ण कहा जाता है क्रोध के साथ एक वस्तु मानचित्रण कर रहे हैं और एक मूल्य 34:

var circle = svg.append("svg:g").selectAll("circle") 
.data(force.nodes()) 
.enter().append("svg:circle") 
.attr("r", 6) 
.on("click", function(d,i) { alert(d.anger); }) // this will alert 34 
.call(force.drag); 

या svg की विशेषताओं के लिए यह कोशिश (svg की त्रिज्या हो रही उदाहरण के लिए,):

+०१२३५१६४१०

var circle = svg.append("svg:g").selectAll("circle") 
.data(force.nodes()) 
.enter().append("svg:circle") 
.attr("r", 6) 
.on("click", function(d,i) { alert(d3.select(this).r; }) // this will print out the radius }) 
.call(force.drag); 

क्षमा करें अगर मेरी पोस्ट उपरोक्त की तरह है, लेकिन मैंने सोचा कि स्पष्टीकरण उपयोगी हो सकता है।