d3.v4：如何使用 linkRadial 而不是 linkVertical/Horizo​​ntal

Question

I am trying to figure out how to use xScale and yScale similar to this post: How to use linkRadial to draw a link between two points?

The suggested solution was to use this mapping function:

var radialData = data.map(function(d) {
    return {
        source: {
            x: 0,
            y: 0
        },
        target: {
            x: Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) - Math.PI,
            y: Math.sqrt((d.target.x - d.source.x) * (d.target.x - d.source.x) + (d.target.y - d.source.y) * (d.target.y - d.source.y))
        }
    };
});

However, the presented solution does not seem to work for my approach as source.x and source.y is allocated with 0. How can the source and target objects be translated correctly or am I missing something?

My data format looks like this:

[{
  source: {
    x: -2.9799212566117377,
    y: -221.97999925512298
  },
  target: {
    x: -57.966610375613655,
    y: -94.66188293902567
  },
}, {
  source: {
    x: -20.132399189515613,
    y: -221.08524713981706
  },
  target: {
    x: -57.966610375613655,
    y: -94.66188293902567
  },
}]

Another approach is presented in: http://using-d3js.com/05_08_links.html However I cannot figure out how to compute xScale and yScale.

Any help is highly appreciated! Thank you in advance!

Answer 1

The logic is the same, only use the origin instead of d.source . Now, you know the angle and radius of the target relative to the origin! Then, you can do the same thing with the source, using the exact same function.

 const data = [{ source: { x: -2.9799212566117377, y: -221.97999925512298 }, target: { x: -57.966610375613655, y: -94.66188293902567 }, }, { source: { x: -20.132399189515613, y: -221.08524713981706 }, target: { x: -57.966610375613655, y: -94.66188293902567 }, }]; d3.select("svg") .attr("width", 600) .attr("height", 600) .append("g") .attr("transform", "translate(300, 300)") .selectAll("path.horizontal") .data(data) .enter() .append("path") .attr("class", "horizontal") .attr("d", d3.linkHorizontal().x(d => dx).y(d => dy)); function toRadial(p) { const angle = Math.atan2(py, px) + Math.PI / 2; // The hypothenuse const radius = Math.sqrt(px ** 2 + py ** 2); return { angle: angle, radius: radius }; } const radialData = data.map(d => ({ source: toRadial(d.source), target: toRadial(d.target), })); d3.select("g") .selectAll("path.radial") .data(radialData) .enter() .append("path") .attr("class", "radial") .attr("d", d3.linkRadial().angle(d => d.angle).radius(d => d.radius));

 path { fill: none; stroke-width: 2px; } .horizontal { stroke: blue; } .radial { stroke: red; }

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