rCharts sankey 图中的单位答案

【问题标题】：Units in rCharts sankey diagramrCharts sankey 图中的单位
【发布时间】：2016-06-15 15:14:17
【问题描述】：

我正在使用以下代码生成 rCharts 桑基图 (https://github.com/timelyportfolio/rCharts_d3_sankey)：

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

在Sankeyplot$set 中，我为单位设置了一个值。但是，我看不到单位，也看不到值。单位示例来自官方 github 文档 (example_hirst_f1.R)。如何在图表中显示值和单位？

【问题讨论】：

标签： javascript r plot rcharts sankey-diagram

【解决方案1】：

在 sankeyPlot 输出中，使用 class="node" 创建了一个 svg g 元素。在此元素中，值及其单位被添加到代表节点的 rect 元素内的 title 元素 中。此 title 元素不是可见元素。另一方面，名称被添加到文本元素中（在本例中为“温暖”）并且可见。

你可以通过在Rstudio的视图窗口中右击然后“检查”来查看这个结构。

Screenshot of the node structure in Web Inspector

快速解决方法是将值及其单位添加到此文本元素。这是通过将 layout/charts.html 中的第 105 行替换为

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

与

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

然后将其用作模板。

当然可能有更好的解决方案。我想由于某种原因标题元素存在（可能在鼠标悬停事件中使用它）。但至少这是一个开始。希望对你有帮助。

【讨论】：

【解决方案2】：

JeroenDM 的答案也可以插入到后记中。在这种情况下，无需修改即可使用 Github 存储库。

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>
  ")

【讨论】：