Einheiten in rCharts Sankey-Diagramm

Question

I den folgenden Code bin mit einem rCharts Sankey-Diagramm (https://github.com/timelyportfolio/rCharts_d3_sankey) zu erzeugen:

if(!require(rCharts)){ 
    library(devtools) 
    install_github('ramnathv/rCharts') 
} 
library(rCharts) 

sankeyPlot <- rCharts$new() 
sankeyPlot$setLib('http://timelyportfolio.github.io/rCharts_d3_sankey') 
sankeyPlot$set(
    data = data.frame(source=c('Cold','Warm','Total'),target=c('Total','Total','End'),value=c(20,80,100)), 
    nodeWidth = 15, 
    nodePadding = 10, 
    layout = 32, 
    width = 500, 
    height = 300, 
    units = "TWh", 
    labelFormat = ".1%" 
) 
sankeyPlot$setTemplate(
    afterScript = " 
    <script> 
    // to be specific in case you have more than one chart 
    d3.selectAll('#{{ chartId }} svg path.link') 
    .style('stroke', function(d){ 
    //here we will use the source color 
    //if you want target then sub target for source 
    //or if you want something other than gray 
    //supply a constant 
    //or use a categorical scale or gradient 
    return d.source.color; 
    }) 
    //note no changes were made to opacity 
    //to do uncomment below but will affect mouseover 
    //so will need to define mouseover and mouseout 
    //happy to show how to do this also 
    // .style('stroke-opacity', .7) 
    </script> 
    ") 

sankeyPlot 

In Sankeyplot$set, habe ich einen Wert für die Einheiten. Allerdings sehe ich weder die Einheiten, noch sehe ich die Werte. Das Beispiel der Einheiten stammt aus der offiziellen github-Dokumentation (example_hirst_f1.R). Wie kann ich die Werte und die Einheiten in meinem Diagramm anzeigen?

Answer 1

Die Antwort von JeroenDM kann auch im Nachsatz eingefügt werden. In diesem Fall kann das Github-Repository ohne Änderungen verwendet werden.

sankeyPlot$setTemplate(
    afterScript = " 
    <script> 
    // to be specific in case you have more than one chart 
    d3.selectAll('#{{ chartId }} svg path.link') 
    .style('stroke', function(d){ 
    //here we will use the source color 
    //if you want target then sub target for source 
    //or if you want something other than gray 
    //supply a constant 
    //or use a categorical scale or gradient 
    return d.source.color; 
    }) 
    //note no changes were made to opacity 
    //to do uncomment below but will affect mouseover 
    //so will need to define mouseover and mouseout 
    //happy to show how to do this also 
    // .style('stroke-opacity', .7) 

    units = ' TWh' 

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

    d3.selectAll('#{{ chartId }} svg .node text') 
    .text(function (d) { return d.name + ' (' + format(d.value) + ')'; }) 
    </script> 
    ") 

Answer 2

Im sankeyPlot Ausgang ein SVG g Element mit class = "node" erstellt wird. In diesem Element werden der Wert und seine Einheit in dem Titel Element innerhalb eines rect Elements hinzugefügt, das den Knoten darstellt. Dieses Titel Element ist kein sichtbares Element. Der Name wird dagegen im Textelement (in diesem Fall "warm") hinzugefügt und ist sichtbar.

Sie können diese Struktur sehen, indem Sie mit der rechten Maustaste in das Ansichtsfenster in Rstudio klicken und dann "inspizieren".

Screenshot of the node structure in Web Inspector

Eine schnelle Lösung wäre es, den Wert und die Einheit dieses Textelement hinzuzufügen. Dies wird durch Ersetzen der Leitung 105 in das Layout/charts.html von

.text(function (d) { return d.name; }) 

getan

mit

.text(function (d) { return d.name + " " + format(d.value); }) 

und dann als Matrize verwendet diese.

Natürlich gibt es wahrscheinlich bessere Lösungen. Ich nehme an, das Titelelement ist aus irgendeinem Grund da (vielleicht in einem mouseover-Event). Aber es ist zumindest ein Anfang. Ich hoffe, es hilft.