используйте d3 для создания всплывающей подсказки узла neo4j

Question

При использовании neo4j, если щелкнуть узел, появится всплывающая подсказка с тремя новыми функциями.

Мне просто интересно, какчтобы иметь такую ​​подсказку с помощью d3.У кого-нибудь есть идеи как это реализовать?

Спасибо.

Answer 1

Вот очень простой пример, с которого можно начать.

При нажатии на него отображаются круг и его концентрические дуги «всплывающей подсказки»:

var width = 400;
var height = 200;

var svg =
  d3.select("svg").attr("width", width).attr("height", height)
    .append("g").attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");

var clicked = false;

svg.append("circle")
  .attr("cx", 0)
  .attr("cy", 0)
  .attr("r", 45)
  .attr("fill", "green")
  .attr("stroke", "light-grey")
  .on("click", addOrRemoveTooltip)
  .attr("cursor", "pointer");

function addOrRemoveTooltip() {

  if (clicked) {
    d3.selectAll("path").remove();
    clicked = false;
  } else {

    var arc = d3.arc().innerRadius(47).outerRadius(80);

    svg.selectAll("arcs")
      .data([
        { start: 0, end: 1/3 },
        { start: 1/3, end: 2/3 },
        { start: 2/3, end: 1 }
      ])
      .enter().append("path")
      .attr("d", d => arc({
        "startAngle": d.start * 2 * Math.PI + 0.01,
        "endAngle": d.end * 2 * Math.PI - 0.01
      }))
      .attr("fill", "lightgrey");

    clicked = true;
  }
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

---

Круг получает слушателя по щелчкам:

svg.append("circle").on("click", doSomething)

При нажатии на круг этот слушатель активируется иРисует 3 дуги следующим образом:

var arc = d3.arc().innerRadius(47).outerRadius(80);

svg.selectAll("arcs")
  .data([
    { start: 0, end: 1/3 },
    { start: 1/3, end: 2/3 },
    { start: 2/3, end: 1 }
  ])
  .enter().append("path")
  .attr("d", d => arc({
    "startAngle": d.start * 2 * Math.PI + 0.01,
    "endAngle": d.end * 2 * Math.PI - 0.01
  }))

Затем нам нужна глобальная переменная, которая будет хранить состояние кнопки: нажата она или нет.

Таким образом, когда слушатель щелчка кругаАктивированный снова, мы знаем, что его предыдущее состояние было нажато, что означает, что дуги всплывающей подсказки должны быть удалены:

d3.selectAll("path").remove();