Question

我有一个相当自定义的d3.js sankey图表设置，并且它正常工作。但是我想让我的悬停选项脱颖而出。理想情况下，我想这样做，以便当我将鼠标悬停在任何给定节点上时，它将显示一个我可以轻松自定义的html表。现在我的sankey代码看起来像这样：

    // add in the nodes
      var node = svg.append("g").selectAll(".node")
          .data(graph.nodes)
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { 
              return "translate(" + d.x + "," + d.y + ")"; })
        .call(d3.behavior.drag()
          .origin(function(d) { return d; })
          .on("dragstart", function() { 
              this.parentNode.appendChild(this); })
          .on("drag", dragmove));

    // add the rectangles for the nodes
      node.append("a")
      .attr("xlink:href", function(d,i) { return "focus.php?name="+d.name; })
          .attr("xlink:show","new")
          .append("rect")
          .attr("height", function(d) { return d.dy; })
          .attr("width", sankey.nodeWidth())
          .style("fill", function(d) { return d.color; })
          .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
          .append("title")
          .text(function(d) { 
          return d.name + 
          "\n" + format(d.value) + 
          "\nNPS: " + d.NPS +
          "\nAHT: " + d.AHT + " seconds" +
          "\nOSAT: " + d.satisfaction });

最后几行是当您将鼠标悬停在节点上时显示的值，就像我说的，这是有效的。但我无法按照自己的喜好对其进行格式化。例如，我希望第一个值（d.name）是粗体和居中的，然后我还要确定还有其他的东西，如颜色和表格间距，我想添加。但我不确定如何让这个工作。

我想要做的是创建一个只有格式化的变量或函数，然后调用它。像：

    var FormatHover = "<table><tr><td><center><b>d.name</b></center></td></tr>"
              "<tr><td>other stuff</td><td>other stuff</td></tr></table>";

然后只需将其调用到我的附件中：

    .append("title")
          .text(FormatHover)

但我知道我无法将HTML应用于svg元素，所以我想知道是否有办法解决这个问题？

感谢任何帮助。：d

d3.js为标题

0 个答案: