Sankey Diagram (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 для своих устройств, но все другие ссылки будут использовать Widgets.

Я также хотел бы знать, как добавлять заметки, такие как URL-адреса, в текстовое поле, которое появляется при наведении мыши.

Answer 1

Вы можете добавить unit как объект недвижимости в объекте данных, а затем передать d.unit в format вместе с d.value.

Вы не можете ничего слишком сложного с присвоенным <title> подсказке в делать, но есть миллион jQuery plugins для делать более сложные вещи с подсказками

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