Добавление цвета к диаграмме Sankey в rCharts

Question

Я создал диаграмму sankey в rCharts, но у вас есть один вопрос. Как добавить цвет? Я хотел бы представлять каждый узел с другим цветом, поэтому проще визуализировать пути, а не просто видеть те же серые линии, которые соединяют все. Код и выход ниже:

require(rCharts) 
    require(rjson) 

    x = read.csv('/Users/<username>/sankey.csv', header=FALSE) 

    colnames(x) <- c("source", "target", "value") 

    sankeyPlot <- rCharts$new() 

    sankeyPlot$set(
    data = x, 
    nodeWidth = 15, 
    nodePadding = 10, 
    layout = 32, 
    width = 500, 
    height = 300, 
    units = "TWh", 
    title = "Sankey Diagram" 
    ) 

    sankeyPlot$setLib('http://timelyportfolio.github.io/rCharts_d3_sankey') 

    sankeyPlot 

Вот что мой график выглядит как

Спасибо так много!

Answer 1

не уверены, какие цвета вы хотите, но если вы установили новый rCharts с devtools::install_github("ramnathv/rCharts"), вот как вы можете цвет на основе исходного значения с demo here.

require(rCharts) 
require(rjson) 

x = read.csv('/Users/<username>/sankey.csv', header=FALSE) 

colnames(x) <- c("source", "target", "value") 

sankeyPlot <- rCharts$new() 

sankeyPlot$set(
data = x, 
nodeWidth = 15, 
nodePadding = 10, 
layout = 32, 
width = 500, 
height = 300, 
units = "TWh", 
title = "Sankey Diagram" 
) 

sankeyPlot$setLib('http://timelyportfolio.github.io/rCharts_d3_sankey') 

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 

Если вы хотите использовать d3.scale.category??(), чтобы обеспечить цвет, я предполагаю, что вы хотели бы также так же цвет прямоугольника узла. Вот один пример изменения цвета как для узла, так и для ссылки.

sankeyPlot$setTemplate(
    afterScript = " 
<script> 
    var cscale = d3.scale.category20b(); 

    // 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; 
     return cscale(d.source.name); 
    }) 
    //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) 
    d3.selectAll('#{{ chartId }} svg .node rect') 
    .style('fill', function(d){ 
     return cscale(d.name) 
    }) 
    .style('stroke', 'none') 
</script> 
") 

sankeyPlot