javascript - D3 桑基图上的颜色特定链接-6ren

javascript - D3 桑基图上的颜色特定链接

转载作者：行者123 更新时间：2023-11-29 15:17:39

我们需要帮助为这个桑基图的特定链接着色。我们希望与“Raleigh”连接的链接为绿色，所有其他链接保持灰色。

这是一张它的外观图片，后面是一张绿色链接去向的图片:

Sankey Now Sankey Future

我们是 d3 的新手，只是想不通，任何帮助都会很棒!!

var svg = d3.select("svg").attr("style", "outline: thin solid grey;"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var formatNumber = d3.format(",.0f"),
    format = function(d) { return formatNumber(d) + " TWh"; },
    color = d3.scaleOrdinal(d3.schemeCategory10);

var school = {"nodes": [




{"name":"Happiness Index"}, // 0
{"name":"Business Cost Index"}, // 1
{"name":"Home Price to Income"}, // 2
{"name":"Population Growth"}, // 3  
{"name":"3 Year GDP Growth"}, // 4
{"name":"Percent with Degree"}, // 5


{"name":"Austin"}, // 6
{"name":"Nashville"}, // 7
{"name":"Atlanta"}, // 8
{"name":"Raleigh"}, // 9
{"name":"Washington DC"}, // 10

],
"links":[


// From Happiness
    {"source":0,"target":6,"value":97},
    {"source":0,"target":9,"value":100},
    {"source":0,"target":10,"value":96},


// From Business Cost
    {"source":1,"target":9,"value":87},
    {"source":1,"target":8,"value":88},
    {"source":1,"target":7,"value":99},

// From PTI
    {"source":2,"target":8,"value":86},



// From Pop Growth
    {"source":3,"target":9,"value":87},
    {"source":3,"target":6,"value":94},

// From 3yrgdp
    {"source":4,"target":9,"value":100},
    {"source":4,"target":6,"value":88},
    {"source":4,"target":7,"value":96},

// From percent undergrad
    {"source":5,"target":9,"value":85},
    {"source":5,"target":10,"value":100},
]};

var sankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .extent([[1, 1], [width - 1, height - 6]]);

var link = svg.append("g")
    .attr("class", "links")
    .attr("fill", "none")
    .attr("stroke", "#000")
    .attr("stroke-opacity", 0.2)
  .selectAll("path");

var node = svg.append("g")
    .attr("class", "nodes")
    .attr("font-family", "sans-serif")
    .attr("font-size", 15)
  .selectAll("g");

sankey(school);

link = link
    .data(school.links)
    .enter().append("path")
      .attr("d", d3.sankeyLinkHorizontal())
      .attr("stroke-width", function(d) { return Math.max(1, d.width); })


// link hover values
link.append("title")
      .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });

node = node
    .data(school.nodes)
    .enter().append("g");

node.append("rect")
      .attr("x", function(d) { return d.x0; })
      .attr("y", function(d) { return d.y0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .attr("fill", function(d) { return color(d.name.replace(/ .*/, "")); })
      .attr("stroke", "#000");

node.append("text")
      .attr("x", function(d) { return d.x0 - 6; })
      .attr("y", function(d) { return (d.y1 + d.y0) / 2; })
      .attr("dy", "0.35em")
      .attr("text-anchor", "end")
      .text(function(d) { return d.name; })
    .filter(function(d) { return d.x0 < width / 2; })
      .attr("x", function(d) { return d.x1 + 6; })
      .attr("text-anchor", "start");

svg.append("text")
        .attr("x", 10)
        .attr("y", 30)
        .attr("class", "graphTitle")
        .text(" ");

svg.append("text")
        .attr("x", width - 80)
        .attr("y", height - 10)

最佳答案

将链接修改为:

link = link
    .data(school.links)
    .enter().append("path")
    .attr("d", d3.sankeyLinkHorizontal())
    .attr("stroke-width", function(d) { return Math.max(1, d.width); })
    .style("stroke", function(d){
      return d.target.name == "Raleigh" ? "green" : "gray";
    });

运行代码:

<!DOCTYPE html>
<html>

  <head>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://unpkg.com/d3-sankey@0.7.1/build/d3-sankey.js"></script>
  </head>

  <body>
    <svg width="500" height="500"></svg>
    <script>
      var svg = d3.select("svg").attr("style", "outline: thin solid grey;"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var formatNumber = d3.format(",.0f"),
    format = function(d) { return formatNumber(d) + " TWh"; },
    color = d3.scaleOrdinal(d3.schemeCategory10);

var school = {"nodes": [




{"name":"Happiness Index"}, // 0
{"name":"Business Cost Index"}, // 1
{"name":"Home Price to Income"}, // 2
{"name":"Population Growth"}, // 3  
{"name":"3 Year GDP Growth"}, // 4
{"name":"Percent with Degree"}, // 5


{"name":"Austin"}, // 6
{"name":"Nashville"}, // 7
{"name":"Atlanta"}, // 8
{"name":"Raleigh"}, // 9
{"name":"Washington DC"}, // 10

],
"links":[


// From Happiness
    {"source":0,"target":6,"value":97},
    {"source":0,"target":9,"value":100},
    {"source":0,"target":10,"value":96},


// From Business Cost
    {"source":1,"target":9,"value":87},
    {"source":1,"target":8,"value":88},
    {"source":1,"target":7,"value":99},

// From PTI
    {"source":2,"target":8,"value":86},



// From Pop Growth
    {"source":3,"target":9,"value":87},
    {"source":3,"target":6,"value":94},

// From 3yrgdp
    {"source":4,"target":9,"value":100},
    {"source":4,"target":6,"value":88},
    {"source":4,"target":7,"value":96},

// From percent undergrad
    {"source":5,"target":9,"value":85},
    {"source":5,"target":10,"value":100},
]};

var sankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .extent([[1, 1], [width - 1, height - 6]]);

var link = svg.append("g")
    .attr("class", "links")
    .attr("fill", "none")
    .attr("stroke", "#000")
    .attr("stroke-opacity", 0.2)
  .selectAll("path");

var node = svg.append("g")
    .attr("class", "nodes")
    .attr("font-family", "sans-serif")
    .attr("font-size", 15)
  .selectAll("g");

sankey(school);

link = link
    .data(school.links)
    .enter().append("path")
    .attr("d", d3.sankeyLinkHorizontal())
    .attr("stroke-width", function(d) { return Math.max(1, d.width); })
    .style("stroke", function(d){
      return d.target.name == "Raleigh" ? "green" : "gray";
    })


// link hover values
link.append("title")
      .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });

node = node
    .data(school.nodes)
    .enter().append("g");

node.append("rect")
      .attr("x", function(d) { return d.x0; })
      .attr("y", function(d) { return d.y0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .attr("fill", function(d) { return color(d.name.replace(/ .*/, "")); })
      .attr("stroke", "#000");

node.append("text")
      .attr("x", function(d) { return d.x0 - 6; })
      .attr("y", function(d) { return (d.y1 + d.y0) / 2; })
      .attr("dy", "0.35em")
      .attr("text-anchor", "end")
      .text(function(d) { return d.name; })
    .filter(function(d) { return d.x0 < width / 2; })
      .attr("x", function(d) { return d.x1 + 6; })
      .attr("text-anchor", "start");

svg.append("text")
        .attr("x", 10)
        .attr("y", 30)
        .attr("class", "graphTitle")
        .text(" ");

svg.append("text")
        .attr("x", width - 80)
        .attr("y", height - 10)
    </script>
  </body>

</html>

关于javascript - D3 桑基图上的颜色特定链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47576760/

文章推荐： python - 如何使用Sqlalchemy和Flask关闭MySql连接？

文章推荐： mysql - 从所有具有相同前缀的表中选择 *

r - 在世界地图上叠加多个河图(桑基图)
下面的迷人图表位于《经济学人》2016 年 1 月 30 日第 61 页。它描绘了从五个地区到六个地区的液化天然气 (LNG) 导出情况。 R 怎么能画出与之相似的东西，也许有几个桑基图(来自包 ri
javascript - D3 桑基图 - 强制节点位置
使用 D3 Sankey 插件，我使用新值更新 Sankey 图(更改数据、为节点和链接传递新值 - 保持所有值一致)。是否有类似 d3.treemap 的 sticky 的功能维护页面上的节点和链接
javascript - Highcharts 桑基图，系列颜色
如何使系列颜色与数据颜色相同？在示例中，“不平衡”数据为红色，但该系列为蓝色。 Highcharts.chart('container', { title: { text:
javascript - R 中的 HighCharts 桑基图
我想使用 R 中的 highcharter 库创建桑基图。通常我只能查看该图的 javascript 代码并将其翻译为 R，但对于桑基图我遇到了一些麻烦。我想首先创建这样的东西:http://jsfi
Python Plotly 桑基图 : Handling circular references
我正在尝试使用 plotly 在桑基图中表示大量数据。问题是我的数据有周期并且它们不受 plotly 的支持。所以我试图正确地删除它们:我想找到这些循环并根据它们的值将它们之间的差异保留在 Sanke
r - D3 桑基图 : Changing Node Position
我正在使用 networkD3 库在 Shiny 中创建一个 Sankey 图。我需要更改一个节点的位置(将其旋转 90d 并向下移动)。为此，我在下面的小示例中使用了 js。但是，更改节点后我需要更
d3.js 桑基图 : rectangles fill color
所以我在玩 d3.js Sankey 图。在 this example (如上图所示)颜色使用定义 var color = d3.scale.category20(); 每个节点都有一个矩形，该矩形
javascript - 带有 csv 数据的 Google 桑基图
我想通过文件获取 csv 数据到下面的桑基图中: 我使用 https://developers.google.com/chart/interactive/docs/gallery/sankey 中的代
javascript - 使用 typescript 的 D3 桑基图
我有这里的代码https://gist.github.com/d3noob/013054e8d7807dff76247b81b0e29030使用普通 javascript 工作，但我很难在使用 Typ
javascript - d3 桑基图 - 如何设置 y 位置
我试图在桑基图的顶部或底部设置节点(按名称)的位置。例如，如果我有一个名为“New”的节点和另一个名为“Dropped”的节点，并且我希望始终将 New 节点保留在图表的顶部，并将 Dropped 节
javascript - R 中的 NetworkD3 桑基图 : How to calculate value for each link?
我正在尝试按照 d3Network 的 R 端口示例来创建详细说明的桑基图(如下所述: https://christophergandrud.github.io/networkD3/ )。我加载以下示

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - D3 桑基图上的颜色特定链接