d3.v4：如何使用 linkRadial 而不是 linkVertical

Question

建议的解决方案是使用此映射功能：

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

        }

    };

});

但是，所提供的解决方案似乎不适用于我的方法，因为 source.x 和 source.y 分配了 0。如何正确翻译源对象和目标对象，或者我是否遗漏了什么？

我的数据格式如下所示：

[{

  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

  },

}]

另一种方法在：http://using-d3js.com/05_08_links.html 但是我不知道如何计算 xScale 和 yScale。

非常感谢任何帮助！先感谢您！

Answer 1

逻辑是一样的，只是使用 origin 而不是d.source. 现在，您知道了目标相对于原点的角度和半径！然后，您可以使用完全相同的功能对源代码执行相同的操作。const data = [{&nbsp; source: {&nbsp; &nbsp; x: -2.9799212566117377,&nbsp; &nbsp; y: -221.97999925512298&nbsp; },&nbsp; target: {&nbsp; &nbsp; x: -57.966610375613655,&nbsp; &nbsp; y: -94.66188293902567&nbsp; },}, {&nbsp; source: {&nbsp; &nbsp; x: -20.132399189515613,&nbsp; &nbsp; y: -221.08524713981706&nbsp; },&nbsp; target: {&nbsp; &nbsp; x: -57.966610375613655,&nbsp; &nbsp; y: -94.66188293902567&nbsp; },}];d3.select("svg")&nbsp; .attr("width", 600)&nbsp; .attr("height", 600)&nbsp; .append("g")&nbsp; .attr("transform", "translate(300, 300)")&nbsp; .selectAll("path.horizontal")&nbsp; .data(data)&nbsp; .enter()&nbsp; .append("path")&nbsp; .attr("class", "horizontal")&nbsp; .attr("d", d3.linkHorizontal().x(d => d.x).y(d => d.y));function toRadial(p) {&nbsp; const angle = Math.atan2(p.y, p.x) + Math.PI / 2;&nbsp; // The hypothenuse&nbsp; const radius = Math.sqrt(p.x ** 2 + p.y ** 2);&nbsp; return {&nbsp; &nbsp; angle: angle,&nbsp; &nbsp; radius: radius&nbsp; };}const radialData = data.map(d => ({&nbsp; source: toRadial(d.source),&nbsp; target: toRadial(d.target),}));d3.select("g")&nbsp; .selectAll("path.radial")&nbsp; .data(radialData)&nbsp; .enter()&nbsp; .append("path")&nbsp; .attr("class", "radial")&nbsp; .attr("d", d3.linkRadial().angle(d => d.angle).radius(d => d.radius));path {&nbsp; fill: none;&nbsp; stroke-width: 2px;}.horizontal {&nbsp; stroke: blue;}.radial {&nbsp; stroke: red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script><svg></svg>