Javascript 性别（最终） .attr（“cx”，图例+键） .attr（“cy”，图例y+2*图例y+5） .attr（“r”，5） .样式（“填充”、“橙色”）； 键。追加（“文本”） .attr（“类”、“传奇文本”） .attr（“id”、“图例\最终标签”）

性别（最终） .attr（“cx”，图例+键） .attr（“cy”，图例y+2*图例y+5） .attr（“r”，5） .样式（“填充”、“橙色”）； 键。追加（“文本”） .attr（“类”、“传奇文本”） .attr（“id”、“图例\最终标签”） .attr（“x”，图例x+键x+10） .attr（“y”，图例y+2*图例y边距+10+键y） .文本（“最终文本”）； //删除 键。追加（“圈”） .attr（“id”、“图例\删除”） .attr（“cx”，图例+键） .attr（“cy”，图例y+3*图例y+5） .attr（“r”，5） .样式（“填充”、“金色”）； 键。追加（“文本”） .attr（“类”、“传奇文本”） .attr（“id”、“图例\删除\标签”） .attr（“x”，图例x+键x+10） .attr（“y”，图例y+3*图例y边距+10+键y） .文本（“删除”）； } 函数tooltipText（d）{ 返回“+d.token+的信息”+ "" + "" + “令牌：”+ “”+d.token+“”+ "" + "" + “方言：”+ “”+d.方言+“”+ "" + "" + “输入法：”+ “”+d.输入法+“”+ "" + "" + “操作系统：”+ “”+d.操作系统+“”+ "" + "" + “审判：+ “”+d.trial+“”+ "" + ""; } 功能节点覆盖（d，i）{ d3.选择全部（“路径”）。样式（“笔划”），功能（p）{ 返回p.source==d | | p.target==d？#17becf:“#8888888” }) } 功能边缘（d）{ d3.选择全部（“路径”）。样式（“笔划”），功能（p）{ 返回p==d？”#17becf:“#8888888” }) } 功能三联体（d）{ var活动， 可变容量； d3.选择（“#arcToken”）；//函数） } 函数tokenOver（d，i）{ d3.选择全部（此）。样式（“笔划”，功能（d）{ 返回p.token==d？#17becf:“#8888888” }) } 函数getData（）{ 返回{ “节点”：[{ “令牌”：“x”， “类型”：“首字母”， “uniq”：“1”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“ia”， “类型”：“最终”， “uniq”：“2”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“1”， “类型”：“选择”， “uniq”：“3”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“m”， “类型”：“首字母”， “uniq”：“4”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“a”， “类型”：“最终”， “uniq”：“5”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“1”， “类型”：“选择”， “uniq”：“6”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“y”， “类型”：“首字母”， “uniq”：“7”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“in”， “类型”：“最终”， “uniq”：“8”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“l”， “类型”：“首字母”， “uniq”：“9”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“iao”， “类型”：“最终”， “uniq”：“10”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“u3;”， “类型”：“选择”， “uniq”：“11”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“*”， “类型”：“有效删除”， “uniq”：“12”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“j”， “类型”：“首字母”， “uniq”：“13”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“un”， “类型”：“最终”， “uniq”：“14”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, { “令牌”：“z”， “类型”：“首字母”， “uniq”：“15”， “年龄组”：“18-30岁”， “方言”：“粤语”， “性别”：“女性”， “操作系统”：“mac”， “输入法”：“苹果”， “审判”：“2”， “中文”：“， “英语”：” }, {

function tooltipText(d) {
 return "<h5>Information for " + d.token + "</h5>" +
   "<table>" +
   "<tr>" +
   "<td class='field'>Token: </td>" +
   "<td>" + d.token + "</td>" +
   "</tr>" +
   "<tr>" +
   "<td class='field'>Dialect: </td>" +
   "<td>" + d.dialect + "</td>" +
   "</tr>" +
   "<tr>" +
   "<td class='field'>IME: </td>" +
   "<td>" + d.input_method + "</td>" +
   "</tr>" +
   "<tr>" +
   "<td class='field'>Operating System: </td>" +
   "<td>" + d.operating_system + "</td>" +
   "</tr>" +
   "<tr>" +
   "<td class='field'>Trial: </td>" +
   "<td>" + d.trial + "</td>" +
   "</tr>" +
   "</table>";
}

.hidden {
  display: none;
  visibility: hidden;
  pointer-events: none;
}

.tooltip {
  color: #222;
  background: #fff;
  padding: .5em;
  text-shadow: #f5f5f5 0 1px 0;
  border-radius: 10px;
  border-color: #a6a6a6;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0px 0px 2px 0px #a6a6a6; 
  opacity: 0.9; 
  position: absolute;
  width: 225px;
  display: block;
}

.tooltip h5 {
  font-size: 1.05rem;
}

.tooltip p {
  font-size: 0.80rem;
}

// Tooltip
var tooltip = d3.select("body").append("div")
  .classed("tooltip", true)
  .classed("hidden", true);

...

nodeEnter.selectAll(".node")
    .on("mousemove", function(d, i) {
      var mouse = d3.mouse(d3.select("body").node());
      tooltip
        .classed("hidden", false)
        .attr("class", "tooltip")
        .attr("style", "left:" + (mouse[0] + 20) + "px; top:" + (mouse[1] - 50) + "px")
        .html(tooltipText(d)); 
    })
    .on("mouseover", nodeOver);