Get a clicked node Details in D3

Get a clicked node Details

by sundaramkumar

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

CSS

.slds-text-heading--large {
  font: bold;
}

.links line {
  stroke: #aaa;
}

.nodes circle {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}

JavaScript

var nodes = [{"name": "Selena Gomez", "x": 400, "y": 400, "fixed": true, "color": "purple"},
							{"name": "Rihana", "x": 350, "y": 350, "fixed": true, "color": "red"},
              {"name": "Avril Lavigne", "x": 250, "y": 350, "fixed": true, "color": "green"}];
         
var edges = [{"source":0, "target":1},
							{"source":2, "target":1}];
  
        
var linkDistance = 150;
 
    //Width and height
    var svgWidth = 800;
    var svgHeight = 450;
    var circleRadius = 10;
    var changeX = 100;
    var changeY;    

    var simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(function(d,i) {
                return i;
            }).distance(linkDistance))
            .force("charge", d3.forceManyBody().strength(0 ))
            .force("center", d3.forceCenter(svgWidth / 2,svgHeight / 2));

    var colors = d3.scaleOrdinal(d3.schemeCategory10);

    //Create SVG element
    var svg = d3.select("svg")
            .attr("width", svgWidth)
            .attr("height", svgHeight);

   
    var edge = svg.append('g')
            .attr('class','links')
            .selectAll("line")
            .data(edges)
            .enter()
            .append("line");

    //Create nodes as circles
    var node = svg.append('g')
            .attr('class','nodes')
            .selectAll('circle')
            .data(nodes)
            .enter()
            .append("circle")
            .attr("r", circleRadius)
            .attr('fill',function (d) {
                return d.color;
            })
           
            .call(d3.drag()
                   .on("start", dragstarted)
                   .on("drag", dragged)
                    .on("end", dragended));
                    
                    

    var nodes_text = svg.selectAll(".nodetext")
            .data(nodes)
            .enter()
            .append("text")
            .attr("class", "nodetext slds-text-heading--label")
            .attr("text-anchor", "middle")
            .attr("dx",...