在 networkd3 中将 sankeyNetwork 的矩形更改为圆形答案

【问题标题】：Change rectangles to circles for sankeyNetwork in networkd3在 networkd3 中将 sankeyNetwork 的矩形更改为圆形
【发布时间】：2021-09-24 17:01:03
【问题描述】：

我在将 sankeyNetwork 中的矩形更改为 R 的 networkd3 包中的圆圈时遇到问题。到目前为止，我的 onrender js 代码只删除了矩形，不确定为什么没有添加圆圈。

这是我的代码：

htmlwidgets::onRender(
  p,
  '
  function(el,x){

  //node variable
  var node=d3.select(el).select("svg").selectAll(".node");
  
  //remove node
  node.selectAll("rect")
    .remove();
    
  // add circles instead
  node
    .append("circle")
    .attr("cx",sankey.nodeWidth()/2)
    .attr("cy",function(d){
    return d.dy/2;
    })
    .attr("r",function(d){
      return Math.sqrt(d.dy);})
    .style("fill", function(d) {
      return d.color = color_node(d); })
    .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
    .style("opacity", 0.9)
    .style("cursor", "move")
    .append("title")
    .append("foreignObject")
    .append("xhtml:body")
    .html(function(d) { return "<pre>" + d.name + "<br>" + format(d.value) + 
        " " + options.units + "</pre>"; })
    ;
    

  }
  '
)

【问题讨论】：

标签： javascript r d3.js htmlwidgets networkd3

【解决方案1】：

您引用了一些不在您的函数范围内的变量和函数...

library(jsonlite)
library(networkD3)
library(htmlwidgets)

URL <- paste0('https://cdn.rawgit.com/christophergandrud/networkD3/',
              'master/JSONdata/energy.json')
energy <- jsonlite::fromJSON(URL)

p <- sankeyNetwork(Links = energy$links, Nodes = energy$nodes, Source = 'source',
                   Target = 'target', Value = 'value', NodeID = 'name',
                   units = 'TWh', fontSize = 12, nodeWidth = 30)


htmlwidgets::onRender(
  p,
  '
  function(el,x){
  
  // map the variables you are trying to use below
  var options = x.options;
  var sankey = this.sankey;
  
  // replicate the private functions from the renderValue function that you call below
  var color = eval(options.colourScale);
  var color_node = function color_node(d){
          if (d.group){
            return color(d.group.replace(/ .*/, ""));
          } else {
            return "#cccccc";
          }
  }
  
  var formatNumber = d3.format(",.0f"),
        format = function(d) { 
            if (typeof d === "string") return d;
            return formatNumber(d); 
        }

  //node variable
  var node=d3.select(el).select("svg").selectAll(".node");
  
  //remove node
  node.selectAll("rect")
    .remove();
    
  // add circles instead
  node
    .append("circle")
    .attr("cx",sankey.nodeWidth()/2)
    .attr("cy",function(d){
    return d.dy/2;
    })
    .attr("r",function(d){
      return Math.sqrt(d.dy);})
    .style("fill", function(d) {
      return d.color = color_node(d); })
    .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
    .style("opacity", 0.9)
    .style("cursor", "move")
    .append("title")
    .append("foreignObject")
    .append("xhtml:body")
    .html(function(d) { return "<pre>" + d.name + "<br>" + format(d.value) + 
        " " + options.units + "</pre>"; })
    ;
    

  }
  '
)

【讨论】：