CODEWITHSUNDEEP
javascriptd3.js
D. Pleckauskas
D. Pleckauskas

Reputation: 25

How to use d3.line().curve when using x1, y1, and x2, y2?

I'm new to d3 and want to connect nodes using elbows. Searching online I found one solution similar to what is required Similar solution however this solution does not work for d3 v4+.

Additionally, I have found a viable approach from d3 named d3.line().curve(d3.curveStepAfter) (I'm not sure if this is the correct use) an example can be seen here. However I can not find a way to implement this for my current set-up which uses x1, y1, and x2, y2.

Data

var data = {
    "nodes": [
    {
        "name": "Node 1",
        fx: 50,
        fy: 50
    },
    {
        "name": "Node 2",
        fx: 50,
        fy: 100
    },
    {
        "name": "Node 3",
        fx: 200,
        fy: 50
    },
    {
        "name": "Node 4",
        fx: 350,
        fy: 50
    },
    {
        "name": "Node 5",
        fx: 200,
        fy: 150
    }].map(function(d, i) { return (d.fixed = true, d) }),

    "links": [
    {
        "source": 0,
        "target": 2
    },
    {
        "source": 1,
        "target": 2
    },
    {
        "source": 2,
        "target": 3
    },
    {
        "source": 2,
        "target": 4
    }]
}

Code

var width = 560
var height = 500;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var force = self.force = d3.forceSimulation(data.nodes)
    .force("link", d3.forceLink(data.links))
    .force("collide", d3.forceCollide())
    .force("center", d3.forceCenter(width / 2, height / 2))
    .on("tick", ticked);

var link = svg.selectAll("line.link")
.data(data.links)
.enter()
.append("line")
    .style("stroke", "black")
    .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; })

var node = svg.selectAll("g.node")
    .data(data.nodes)
    .enter()
    .append("g")
        .attr("class", "node")
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));

d3.selectAll(".node")
    .append("circle")
        .style("fill", "red")
        .attr("r", 15);


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(event) {
    if (!event.active) force.alphaTarget(0.3).restart();
    event.subject.fx = event.subject.x;
    event.subject.fy = event.subject.y;
}

function dragged(event) {
    event.subject.fx = Math.ceil(event.x/5)*5;
    event.subject.fy = Math.ceil(event.y/5)*5;
}

function dragended(event) {
    if (!event.active) force.alphaTarget(0);
}

The code renders the nodes and connects them with straight lines, the goal is to add the curveStepAfter to create an elbow join as it looks neater for the type of diagram I require.

Any help is appreciated.

Upvotes: 1

Views: 1059

Answers (1)

Dan
Dan

Reputation: 1581

Here's a complete example.

<html>
    <head>
        <script src="https://d3js.org/d3.v7.min.js"></script>
    </head>
    
    <body>
        <script>
            const data = {
              nodes: [
                { name: "Node 1", x: 50, y: 50 },
                { name: "Node 2", x: 50, y: 100 },
                { name: "Node 3", x: 200, y: 50 },
                { name: "Node 4", x: 350, y: 50 },
                { name: "Node 5", x: 200, y: 150 },
              ],
              links: [
                { source: 0, target: 2 },
                { source: 1, target: 2 },
                { source: 2, target: 3 },
                { source: 2, target: 4 },
              ],
            };
            
            const segments = data.links.map(({ source, target }) => [
              data.nodes[source],
              data.nodes[target],
            ]);

            const width = 560
            const height = 500;

            const svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

            const line = d3.line()
                .x(d => d.x)
                .y(d => d.y)
                .curve(d3.curveStep);

            const link = svg.selectAll("path.link")
              .data(segments)
              .join("path")
                .attr("d", line)
                .attr("stroke", "black")
                .attr("fill", "none")

            const node = svg.selectAll("g.node")
              .data(data.nodes)
              .join("g")
                .attr("class", "node")
                .attr("transform", d => `translate(${d.x},${d.y})`)
                .call(d3.drag()
                    .on("drag", dragged));

            node.append("circle")
                .style("fill", "red")
                .attr("r", 15);

            function dragged(event, d) {
              d.x = Math.ceil(event.x / 5) * 5;
              d.y = Math.ceil(event.y / 5) * 5;

              link.attr("d", line);

              d3.select(this)
                  .attr("transform", `translate(${d.x},${d.y})`)
            }
        </script>
    </body>
</html>

The main idea is that

const segments = data.links.map(({ source, target }) => [
  data.nodes[source],
  data.nodes[target],
]);

is an array of line segments in the network. We can pass each segment to a d3.line() to create a <path> for the segment. I've also removed the dependency on d3-force, which isn't needed.

Upvotes: 1

Related Questions