Блог

Итак, у меня есть следующий код:

 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 отображались поверх моих исходных кругов connector.

Как бы мне добиться этого в D3? Как вы можете видеть, в настоящее время я пытаюсь применить добавление 10 единиц поверх каждого элемента, но, похоже, это не работает.

Опять же, я пытаюсь сложить каждый из четырех кругов connectorPlus примерно на 10 пикселей вверх от исходных кругов connector.

Любые идеи по этому поводу очень ценятся.

Спасибо.

В этом случае я просто использовал положение каждой начальной позиции круга, а затем добавил или вычел 10 к соответствующей оси, на которой находился каждый из них. Приведенный ниже пример и позиции в переменной ‘position’, взятые откуда-то еще в коде:

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