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

Question

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

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

感谢。

Answer 1

这是一个非常基本的例子，可以帮助您入门。

它显示一个圆圈及其同心的＆＃34;工具提示＆＃34;点击时的弧线：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

圈子会在点击时获得听众：

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