d3.js - 使用 d3 创建 neo4j 节点工具提示

Question

使用 neo4j 时，如果单击节点，将显示圆形工具提示，其中包含三个新功能。

我只是想知道如何使用 d3 来获得这种工具提示。有谁知道如何实现它？

谢谢。

标签： d3.jsneo4j

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