javascript - 如何使用 D3 将 SVG 圆圈堆叠在另一个圆圈之上？

Question

所以我有以下代码：

let connector = g
          .append("circle")
          .attr("cx", positionElement.x)
          .attr("cy", positionElement.y)
          .attr("r", 4)
          .attr("class", "connector");

let connectorPlus = g
          .append("circle")
          .attr("cx", positionElement.x)
          .attr("cy", positionElement.y + 10)
          .attr("r", 4)
          .attr("class", "connector");

这些圆形 SVG 出现在一个矩形的顶部。我正在努力使我的 connectorPlus 圆圈出现在我原来的连接器圆圈之上。

我将如何在 D3 中实现这一目标？如您所见，我目前正在尝试在每个元素上添加 10 个单位，但这似乎不起作用。

同样，我试图将四个 connectorPlus 圆圈中的每一个都堆叠在距离原始连接器圆圈大约 10 个像素的位置。

对此的任何想法都非常感谢。

谢谢。

标签： javascriptsvgd3.js

Answer 1

在这种情况下，我只是简单地使用了每个初始圆位置的位置，然后在他们每个人所在的相关轴上加减 10。下面的示例以及“位置”变量中的位置，从代码中的其他位置获取：

let connectorPlus;

if (position == 'bottom') {
    connectorPlus = g
    .append("circle")
    .attr("cx", positionElement.x)
    .attr("cy", positionElement.y + 10)
    .attr("r", 4)
    .attr("class", "connector");
}
if (position == 'top') {
    connectorPlus = g
    .append("circle")
    .attr("cx", positionElement.x)
    .attr("cy", positionElement.y - 10)
    .attr("r", 4)
    .attr("class", "connector");
}
if (position == 'bottom') {
    connectorPlus = g
    .append("circle")
    .attr("cx", positionElement.x)
    .attr("cy", positionElement.y + 10)
    .attr("r", 4)
    .attr("class", "connector");
}
if (position == 'left') {
    connectorPlus = g
    .append("circle")
    .attr("cx", positionElement.x - 10)
    .attr("cy", positionElement.y)
    .attr("r", 4)
    .attr("class", "connector");
}
if (position == 'right') {
    connectorPlus = g
    .append("circle")
    .attr("cx", positionElement.x + 10)
    .attr("cy", positionElement.y)
    .attr("r", 4)
    .attr("class", "connector");
}