d3.js - 桑基图 (D3) - 如何为链接值使用多个单位以及如何向鼠标悬停弹出框添加注释？

Question

http://bl.ocks.org/d3noob/5028304

查看此示例，将鼠标悬停在链接上会显示源、目标和值。该值附加了变量“units”，在本示例中为“Widgets”。

var units = "Widgets";

var formatNumber = d3.format(",.0f"), // zero decimal places
  format = function(d) { return formatNumber(d) + " " + units; }, 
  color = d3.scale.category20(); 

有什么方法可以创建类，以便在一个源和目标之间的链接附加一种类型的单位，而其他人使用不同的单位？在此示例中，假设我们希望“能源”及其所有目标之间的链接使用 MWh 作为其单位，但所有其他链接将使用小部件。

我也很想知道如何在鼠标悬停时弹出的文本框中添加注释，例如 URL。

Answer 1

您可以将unit其作为属性添加到数据对象上，d.unit然后format与d.value.

你不能用默认的<title>工具提示做任何太复杂的事情，但是有一百万个jQuery 插件可以用工具提示做更复杂的事情

Answer 2

这是解决方案：

d3.json("network2.json", function(error, graph) {

var nodeMap = {};
graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
graph.links = graph.links.map(function(x) {
  return {
    source: nodeMap[x.source],
    target: nodeMap[x.target],
    value: x.value,
    units: x.units
  };
});

  link.append("title")
    .text(function(d) {
        return d.source.name + " ↔ " + d.target.name + "\n" +
                       d.value + " " + d.units; });