d3. I want the straight line of the js graph to be curved

Using cola.js, we create a graph layout similar to sample program.
Is it possible to change the straight line of this link to a curve?in d3.js
as shown in this example I'd like to make it a curve, but I'm not sure which part of the curve or straight line it is.

Currently, we define the coordinates of the link as follows:

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;});

If you follow the example above and define it as follows, the link disappears and
It is not displayed.What should I do?

link.attr("d", function(d){
    vardx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx*dx+dy*dy);
    return "M" + 
        d.source.x+", "+ 
        d.source.y + "A" + 
        dr+", "+dr+"0 0, 1"+ 
        d.target.x+", "+ 
        d.target.y;
});

Thank you for your cooperation.

javascript d3.js

2022-09-30 15:36

1 Answers

In the current example, I think the variable link is the line element, but in the case of curves, it must be the path element.

For example, verify that the variable link is created as a path element as follows:

var link=svg.append('path');

const data=[{
  source: {
    x:10, y:10
  },
  target: {
    x:50, y:50
  }
}]

const svg = d3.select('svg')

constlink=svg.append('path')
  .data(data)
  .attr('fill', 'transparent')
  .attr('stroke', '#000')
  .attr("d", function(d){
    vardx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx*dx+dy*dy);
    return "M" + 
        d.source.x+", "+ 
        d.source.y + "A" + 
        dr+", "+dr+"0 0, 1"+ 
        d.target.x+", "+ 
        d.target.y;
  });

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

2022-09-30 15:36

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656