score:2
Accepted answer
group circle and text inside a group element. you can use marker-end property to add end markers to the line.
there are marker-mid
and marker-start
configs too.
var graph = json.parse('{"nodes":[{"id":"0","color":"#4444e5"},{"id":"1","color":"#4444e5"},{"id":"2","color":"#cccccc"},{"id":"3","color":"#cccccc"},{"id":"4","color":"#cccccc"},{"id":"5","color":"#cccccc"},{"id":"6","color":"#cccccc"},{"id":"7","color":"#cccccc"},{"id":"8","color":"#cccccc"},{"id":"9","color":"#cccccc"},{"id":"10","color":"#cc0000"},{"id":"11","color":"#cccccc"},{"id":"12","color":"#cccccc"},{"id":"13","color":"#cccccc"},{"id":"14","color":"#cccccc"},{"id":"15","color":"#cc0000"}],"links":[{"source":1,"target":15,"weight":-0.7582412523901727},{"source":0,"target":6,"weight":-0.08179822732917646},{"source":6,"target":10,"weight":0.0939757437427291},{"source":3,"target":4,"weight":0.436380368086641},{"source":4,"target":5,"weight":-0.5385567058738547},{"source":1,"target":2,"weight":-0.277729004201837},{"source":2,"target":3,"weight":0.7675128737907505},{"source":13,"target":14,"weight":0.5519067984674436},{"source":14,"target":15,"weight":0.832660697502495},{"source":5,"target":7,"weight":0.8607887414383458},{"source":7,"target":8,"weight":-0.8965760877371078},{"source":8,"target":9,"weight":-0.2488791800975232},{"source":9,"target":10,"weight":-0.646075500567235},{"source":12,"target":13,"weight":0.40622804770087395},{"source":0,"target":11,"weight":0.24806004723386413},{"source":11,"target":12,"weight":0.8035303834469385}]}');
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var defs = svg.append("defs")
var marker = defs
.append("svg:marker")
.attr("id", "arrow")
.attr("viewbox", "0 -5 10 10")
.attr("refx", 15)
.attr("refy", -1.5)
.attr("markerwidth", 6)
.attr("markerheight", 6)
.attr("orient", "auto")
marker.append("path")
.attr("d", "m0,-5l10,0l0,5")
.attr("class", "arrowhead");
var simulation = d3.forcesimulation()
.force("link", d3.forcelink().id(function(d) {
return d.id;
}))
.force("charge", d3.forcemanybody())
.force("center", d3.forcecenter(width / 2, height / 2));
var link = svg.append("g")
.attr("class", "links")
.selectall("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) {
return math.sqrt(d.weight);
}).attr("marker-end", "url(#arrow)")
var node = svg.append("g")
.attr("class", "nodes")
.selectall("circle")
.data(graph.nodes)
.enter().append("g");
node.append("circle")
.attr("r", 5)
.attr("fill", function(d) {
return d3.color(d.color);
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var label = node.append("text")
.attr("class", "label")
.text("test")
node.append("title")
.text(function(d) {
return d.id;
});
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
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;
});
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphatarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphatarget(0);
d.fx = null;
d.fy = null;
}
line {
stroke: black;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="600"></svg>
score:1
your texts are not part of the simulation. besides that, when you do...
var label = svg.selectall(".node")
.data(graph.nodes)
.enter().append("text")
... your "enter" selection will have one element less, because there is already a <g>
element with class node
in that svg.
solution: append both circles and texts to groups:
var node = svg.append("g")
.attr("class", "nodes")
.selectall("foo")
.data(graph.nodes)
.enter().append("g");
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) {
return d3.color(d.color);
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var label = node.append("text")
.attr("class", "label")
.text("test");
and use transform
in the ticked
function:
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
here is your updated code:
var graph = json.parse('{"nodes":[{"id":"0","color":"#4444e5"},{"id":"1","color":"#4444e5"},{"id":"2","color":"#cccccc"},{"id":"3","color":"#cccccc"},{"id":"4","color":"#cccccc"},{"id":"5","color":"#cccccc"},{"id":"6","color":"#cccccc"},{"id":"7","color":"#cccccc"},{"id":"8","color":"#cccccc"},{"id":"9","color":"#cccccc"},{"id":"10","color":"#cc0000"},{"id":"11","color":"#cccccc"},{"id":"12","color":"#cccccc"},{"id":"13","color":"#cccccc"},{"id":"14","color":"#cccccc"},{"id":"15","color":"#cc0000"}],"links":[{"source":1,"target":15,"weight":-0.7582412523901727},{"source":0,"target":6,"weight":-0.08179822732917646},{"source":6,"target":10,"weight":0.0939757437427291},{"source":3,"target":4,"weight":0.436380368086641},{"source":4,"target":5,"weight":-0.5385567058738547},{"source":1,"target":2,"weight":-0.277729004201837},{"source":2,"target":3,"weight":0.7675128737907505},{"source":13,"target":14,"weight":0.5519067984674436},{"source":14,"target":15,"weight":0.832660697502495},{"source":5,"target":7,"weight":0.8607887414383458},{"source":7,"target":8,"weight":-0.8965760877371078},{"source":8,"target":9,"weight":-0.2488791800975232},{"source":9,"target":10,"weight":-0.646075500567235},{"source":12,"target":13,"weight":0.40622804770087395},{"source":0,"target":11,"weight":0.24806004723386413},{"source":11,"target":12,"weight":0.8035303834469385}]}');
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var simulation = d3.forcesimulation()
.force("link", d3.forcelink().id(function(d) {
return d.id;
}))
.force("charge", d3.forcemanybody())
.force("center", d3.forcecenter(width / 2, height / 2));
var link = svg.append("g")
.attr("class", "links")
.selectall("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) {
return math.sqrt(d.weight);
})
var node = svg.append("g")
.attr("class", "nodes")
.selectall("foo")
.data(graph.nodes)
.enter().append("g");
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) {
return d3.color(d.color);
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var label = node.append("text")
.attr("class", "label")
.text("test");
node.append("title")
.text(function(d) {
return d.id;
});
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
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;
});
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphatarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphatarget(0);
d.fx = null;
d.fy = null;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="400"></svg>
Source: stackoverflow.com
Related Query
- D3 assigning nodes labels
- Placing labels at the center of nodes in d3.js
- Labels / text on the nodes of a D3 force directed graph
- How do I hide the text labels in d3 when the nodes are too small?
- How to make labels and nodes in D3 forced layout clickable to navigate to a URL?
- Dragging nodes with labels in d3 v4 force layout glitches
- Assigning hyperlinks to nodes in dagre-d3
- Add labels to nodes in Hobbelt's "Group/Bundle Nodes" D3 force layout example?
- Updating nodes and links with labels in d3 force directed network graph is not removing the nodes properly
- Interactive labels on nodes using python and networkx
- Labels and images for D3 nodes incorrectly show at top left of screen
- NetworkD3 Sankey Plot in R: How to switch text labels from the right to the left of the inner nodes only
- D3 circle pack - Adding labels to nodes
- Tree diagram - prevent labels overlapping nodes
- d3js Moving the labels next to the nodes
- Pushing left labels to the left of the nodes in Sankey diagram
- Adding labels to nodes in Flowing Data Interactive Network Demo
- D3 placing nodes labels inside circles in Mobile Patent Suits
- d3.js collapsible force diagram - assigning unique ID's to identical nodes
- Dragging force layout nodes by dragging their labels
- Adding new nodes to Force-directed layout
- Understanding how D3.js binds data to nodes
- How do I include newlines in labels in D3 charts?
- D3js: Automatic labels placement to avoid overlaps? (force repulsion)
- D3 Tree Layout Separation Between Nodes using NodeSize
- d3.js: Align text labels between ticks on the axis
- Simple graph of nodes and links without using force layout
- d3.js how to dynamically add nodes to a tree
- Create a D3 axis without tick labels
- Drawing multiple edges between two nodes with d3
More Query from same tag
- D3: how to disable zoom on icons with background image?
- Create a Vertical Column Chart with D3 using CSV with Similar String Occurrences
- D3.js issue using the line chart defined function
- D3 transition working on "background-color" but not on "width"
- Extracting HTML Link from Javascript Associative Array to apply to D3 Generated Table
- Stacked bar plot with multiple data and respective data points as legend
- change path size on click to zoom d3.js
- Combining ggplot2 and d3 (gridSVG tutorial results in non-interactive image)
- Docuburst-like sunburst diagram with D3?
- Title Attribute not working for an SVG Rect on Safari
- jsdom svg transform transitions - Cannot read property 'baseVal' of undefined
- D3 line chart not showing anything
- D3js Network Graph - Only drag fires on clicks
- Repainting/Refreshing Graph in D3
- Sales pipeline chart
- d3.js Line Graph Axises won't go to highest number
- D3 Sankey customization
- Feeding data into database with Php form and using that data into JSON format to be used in D3
- the lines' points x1, x2, y1, y2 do not coincide with nodes in a radial tree
- D3.js - Line graph does not display Y axis and scale of X axis is incorrect
- D3.js Giving a legend to a donut chart with inner rings
- D3 Selection Highlight (efficiency?)
- MouseClick node event on d3 graph
- Javascript D3 - put results into a DIV
- How to wrap the text inside the SVG polygon without cutting the text
- D3 - circle packing multiple data
- How can I choose an specific SVG in d3 and change its attributes?
- d3 log scale: base not making an effect?
- How to create skewed axes?
- Updating the coordinates in d3js for a tree layout