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 = [{

  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 => d.x).y(d => d.y));

function toRadial(p) {

  const angle = Math.atan2(p.y, p.x) + Math.PI / 2;

  // The hypothenuse

  const radius = Math.sqrt(p.x ** 2 + p.y ** 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>