Geek Answers Handbook

D3 directional chart: updated node position

I just started with the d3 library . I spent a couple of days learning api and looked at the examples and started my own project, based on the power graphics example.

How to update node (s) position after tick , if instead of using simple shapes ( square , circle ...) you draw nodes using paths?

I gave an example that can be viewed here: jsFiddle

 var svg = d3.select('#view').attr({width: 300, height: 300}); var data = { "nodes": [ { "id": "node_0", "name": "Node 0", "color": "blue", "h": 10, "w": 20, "t": "triangle" },.... ], "links": [ { "source": 0, "target": 1 },... ] }; var force = d3.layout.force().size([300, 300]) .linkDistance(50) .nodes(data.nodes) .links(data.links).start() var link = svg.selectAll('.link').data(data.links).enter() .append('line') .attr('class', 'link') .attr({"stroke": "#ccc", "stroke-width": 1.5}); var wrapper = svg.selectAll('.node').data(data.nodes).enter() .append('g') .attr('class', 'node') .attr('x', function(d){return dx}) .attr('y', function(d){return dy}); var getShape = function(t, x, y, w, h){ var points = (t == 'triangle') ? [ [x + w/2, y], [x + w/2 , y], [x + w, y + h], [x, y + h]] : [ [x, y], [x + w, y], [x + w, y + h], [x, y + h]]; return d3.svg.line()(points) } var node = wrapper.append('path') .attr('d', function(d){return getShape(dt, dx , dy, dh, dw) }) .attr('x', function(d){return dx}) .attr('y', function(d){return dy}) .attr('fill', function(d){return d.color}) .call(force.drag); 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}) node .attr('cx', function(d){return dx}) .attr('cy', function(d){return dy}); });
+1
javascript svg force-layout
source share
2 answers

For general shapes, you can simply use the transform attribute to move the nodes accordingly, see, for example, this example .

+2
source share

You draw your path elements with absolute positions using capital letters. Instead, try declaring paths using relative coordinates using lowercase letters. This will make it much easier to move nodes based on a force simulator using the svg transform property.

Regarding drawing paths with absolute and relative points: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

+1
source share

More articles:


All Articles