D3.js 网络图

Question

Hi I have this nice network graph going. The node that says "scanner" I am trying to make that radius bigger than the other nodes and I want the scanner to be printed on the node while the other nodes have the hover feature. I am struggling since the nodes have to be linked together in order for it to work cohesively. Thank you in advance, looking forward to how you tackle this issue.

 var graph = { "nodes":[ {"name":" Scanner","group":1}, {"name":"Chemical 1 ","group":1}, {"name":"Chemical 2","group":1}, {"name":"Chemical 3","group":1}, {"name":"Chemical 4","group":1} ], "links":[ {"source":0,"target":1,"value":1}, {"source":0,"target":2,"value":1}, {"source":0,"target":3,"value":1}, {"source":0,"target":4,"value":1}, {"source":0,"target":0,"value":1} ] }; var width = 1000, height = 1000; var force = d3.layout.force() .charge(-300) .linkDistance(300) .size([width, height]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var drawGraph = function(graph) { force .nodes(graph.nodes) .links(graph.links) .start(); var link = svg.selectAll(".link") .data(graph.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return Math.sqrt(d.value); }); var gnodes = svg.selectAll('g.gnode') .data(graph.nodes) .enter() .append('g') .classed('gnode', true); var node = gnodes.append("circle") .attr("class", "node") .attr("r", 25) .on("mouseover", function(d) { d3.select(labels[0][d.index]).style("visibility","visible") }) .on("mouseout", function(d) { d3.select(labels[0][d.index]).style("visibility","hidden") }) .call(force.drag); var labels = gnodes.append("text") .text(function(d) { return d.name; }) .style("visibility", "hidden"); force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); gnodes.attr("transform", function(d) { return 'translate(' + [dx, dy] + ')'; }); }); }; drawGraph(graph);

 .node { stroke: #fff; stroke-width: 1.5px; } .nodeDetail { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stroke-opacity: .6; } .text { font: 12px sans-serif; pointer-events: none; } .node { stroke:#fff; stroke-width:3px; fill:#2E8B57; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

Answer 1

Larger radius for "scanner" circle

d3.js selection.attr accepts a function as the second parameter, allowing to set different values according to the data.

In this function, you should check whether d.name is "Scanner", and return a radius value accordingly.

.attr("r", function(d) { return d.name === 'Scanner'? 40 : 25; })

Always display the label for Scanner

Similarly, selection.style setting visibility for labels should be initialized in a function checking data value:

.style("visibility", function(d) { return d.name === 'Scanner'? 'visible' : 'hidden'; });

In order to have the mouseover and mouseout event listeners only applying to the other nodes, use selection.filter :

.filter(function(d) { return d.name !== 'Scanner'})
.on("mouseover", function(d)
// ...

Demo

The snippet below illustrates the solution.

Remark: The leading space character scanner node found in the question has been removed in this demo : "Scanner" instead of " Scanner"

 var graph = { "nodes":[ {"name":"Scanner","group":1}, {"name":"Chemical 1 ","group":1}, {"name":"Chemical 2","group":1}, {"name":"Chemical 3","group":1}, {"name":"Chemical 4","group":1} ], "links":[ {"source":0,"target":1,"value":1}, {"source":0,"target":2,"value":1}, {"source":0,"target":3,"value":1}, {"source":0,"target":4,"value":1}, {"source":0,"target":0,"value":1} ] }; var width = 1000, height = 1000; var force = d3.layout.force() .charge(-300) .linkDistance(300) .size([width, height]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var drawGraph = function(graph) { force .nodes(graph.nodes) .links(graph.links) .start(); var link = svg.selectAll(".link") .data(graph.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return Math.sqrt(d.value); }); var gnodes = svg.selectAll('g.gnode') .data(graph.nodes) .enter() .append('g') .classed('gnode', true); var node = gnodes.append("circle") .attr("class", "node") .attr("r", function(d) { return d.name === 'Scanner'? 40 : 25; }) .call(force.drag) .filter(function(d) { return d.name !== 'Scanner'}) .on("mouseover", function(d) { d3.select(labels[0][d.index]).style("visibility","visible") }) .on("mouseout", function(d) { d3.select(labels[0][d.index]).style("visibility","hidden") }) var labels = gnodes.append("text") .text(function(d) { return d.name; }) .style("visibility", function(d) { return d.name === 'Scanner'? 'visible' : 'hidden'; }); force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); gnodes.attr("transform", function(d) { return 'translate(' + [dx, dy] + ')'; }); }); }; drawGraph(graph);

 .node { stroke: #fff; stroke-width: 1.5px; } .nodeDetail { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stroke-opacity: .6; } .text { font: 12px sans-serif; pointer-events: none; } .node { stroke:#fff; stroke-width:3px; fill:#2E8B57; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>