问题：
更改D3/Javascript中Sankey图的链接颜色
甄志
我无法弄清楚如何更改节点之间链接的颜色。好吧，我知道如何直接更改颜色，但似乎不知道如何将if语句放入Sankey的js代码中。
我需要一个if语句来使任何“值”高于30以具有红色链接，如果它们低于30，则为灰色或#000。
当值超过30时，这是我正在寻找的红色：
这是代码，我所说的值类似于：{“源”： 0，“目标”： 2，“值”： 33}
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":"High School"}, // 0
{"name":"Community College"}, // 1
{"name":"Finance"}, // 2
{"name":"Accounting"}, // 3
{"name":"ITS"}, // 4
{"name":"Marketing"}, // 5
{"name":"Analytics"}, // 6
{"name":"Security"}, // 7
{"name":"Consulting"}, // 8
{"name":"Banking"}, // 9
{"name":"Internal"}, // 10
{"name":"Securities"}, // 11
{"name":"Public"}, // 12
{"name":"Audting"}, // 13
{"name":"Internal"}, // 14
{"name":"Retail"}, // 15
{"name":"Technology"}, // 16
{"name":"Strategy"} // 17
],
"links":[
// From HS
{"source":0,"target":2,"value":33},
{"source":0,"target":3,"value":42},
{"source":0,"target":4,"value":74},
{"source":0,"target":5,"value":60},
// From Community College
{"source":1,"target":2,"value":7},
{"source":1,"target":3,"value":13},
{"source":1,"target":4,"value":11},
{"source":1,"target":5,"value":9},
// From Finance
{"source":2,"target":9,"value":16},
{"source":2,"target":10,"value":14},
{"source":2,"target":11,"value":10},
// From Accounting
{"source":3,"target":12,"value":20},
{"source":3,"target":13,"value":12},
{"source":3,"target":7,"value":8},
{"source":3,"target":14,"value":15},
// From Marketing
{"source":5,"target":6,"value":30},
{"source":5,"target":15,"value":39},
// From ITS
{"source":4,"target":8,"value":19},
{"source":4,"target":6,"value":40},
{"source":4,"target":7,"value":20},
{"source":4,"target":12,"value":6},
// From ITS Consulting to Tech and Strat
{"source":8,"target":16,"value":10},
{"source":8,"target":17,"value":9},
]};
var sankey = d3.sankey()
.nodeWidth(15)
.nodePadding(10)
.extent([[1, 1], [width - 1, height - 6]])
.nodeAlign(d3.sankeyLeft);
var link = svg.append("g")
.attr("class", "links")
.attr("fill", "none")
//.attr("stroke", "#000")
.attr("stroke", function(d) {
if (d3.value > 30)
{return "red"}
else {return "#000"};
})
.attr("stroke-opacity", 0.2)
.selectAll("path");
var node = svg.append("g")
.attr("class", "nodes")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.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("STUDENT CHOICES");
svg.append("text")
.attr("x", width - 80)
.attr("y", height - 10)
.attr("class", "footnote")
.text("data is fictitious");共有1个答案
颛孙成益
在定义链接时，您应该能够只添加带有函数的描边颜色:
link = link
.data(school.links)
.enter().append("path")
.attr("d", d3.sankeyLinkHorizontal())
.attr("stroke-width", function(d) { return Math.max(1, d.width); })
.attr("stroke", d => d.value > 30 ? 'red': 'gray')
这是一个工作片段：
var width = 500,
height =300
var xscale = d3.scaleLinear()
.range([0, width])
.domain([0, 100])
var yscale = d3.scaleLinear()
.range([height, 0])
.domain([0, 6])
var data = [
{student_percentile: 90, rank:1},
{student_percentile: 40, rank:3},
{student_percentile: 30, rank:4},
{student_percentile: 20, rank:5}
]
var svg = d3.select("#chart")
.append("svg")
.attr("style", "outline: thin solid grey;")
.attr("width", width)
.attr("height", height)
.append("g")
/*
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":"High School"}, // 0
{"name":"Community College"}, // 1
{"name":"Finance"}, // 2
{"name":"Accounting"}, // 3
{"name":"ITS"}, // 4
{"name":"Marketing"}, // 5
{"name":"Analytics"}, // 6
{"name":"Security"}, // 7
{"name":"Consulting"}, // 8
{"name":"Banking"}, // 9
{"name":"Internal"}, // 10
{"name":"Securities"}, // 11
{"name":"Public"}, // 12
{"name":"Audting"}, // 13
{"name":"Internal"}, // 14
{"name":"Retail"}, // 15
{"name":"Technology"}, // 16
{"name":"Strategy"} // 17
],
"links":[
// From HS
{"source":0,"target":2,"value":33},
{"source":0,"target":3,"value":42},
{"source":0,"target":4,"value":74},
{"source":0,"target":5,"value":60},
// From Community College
{"source":1,"target":2,"value":7},
{"source":1,"target":3,"value":13},
{"source":1,"target":4,"value":11},
{"source":1,"target":5,"value":9},
// From Finance
{"source":2,"target":9,"value":16},
{"source":2,"target":10,"value":14},
{"source":2,"target":11,"value":10},
// From Accounting
{"source":3,"target":12,"value":20},
{"source":3,"target":13,"value":12},
{"source":3,"target":7,"value":8},
{"source":3,"target":14,"value":15},
// From Marketing
{"source":5,"target":6,"value":30},
{"source":5,"target":15,"value":39},
// From ITS
{"source":4,"target":8,"value":19},
{"source":4,"target":6,"value":40},
{"source":4,"target":7,"value":20},
{"source":4,"target":12,"value":6},
// From ITS Consulting to Tech and Strat
{"source":8,"target":16,"value":10},
{"source":8,"target":17,"value":9},
]};
var sankey = d3.sankey()
.nodeWidth(15)
.nodePadding(10)
.extent([[1, 1], [width - 1, height - 6]])
.nodeAlign(d3.sankeyLeft);
var link = svg.append("g")
.attr("class", "links")
.attr("fill", "none")
//.attr("stroke", "#000")
.attr("stroke", function(d) {
if (d3.value > 30)
{return "red"}
else {return "#000"};
})
.attr("stroke-opacity", 0.2)
.selectAll("path");
var node = svg.append("g")
.attr("class", "nodes")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.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); })
.attr("stroke", d => d.value > 30 ? 'red': '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("STUDENT CHOICES");
svg.append("text")
.attr("x", width - 80)
.attr("y", height - 10)
.attr("class", "footnote")
.text("data is fictitious");<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-sankey@0"></script>
<div id="chart"></div>
类似资料：
-
我想改变字体的颜色，或者在字体中添加阴影以提高可视性。然而，我还没有找到一种方法去做。一种替代方法是使用plotly，但当你将plotly对象放入闪亮的应用程序并在手机中可视化时，你会失去交互标签，因此networkD3提供了更好的集成。唯一的问题是，我很难个性化服装。我想改变字体颜色。 一个值得指责的例子:
-
本文向大家介绍如何更改HTML中链接的颜色？，包括了如何更改HTML中链接的颜色？的使用技巧和注意事项，需要的朋友参考一下 要更改HTML中链接的颜色，请使用CSS属性color。与style属性一起使用。style属性指定元素的内联样式。 使用style属性和CSS属性color可以更改链接颜色。请记住，样式属性的使用会覆盖全局设置的任何样式。它将覆盖HTML <style>标记或外部样式表中设
-
我已经使用r中的networkd3创建了一个。如何更改流线或链接的颜色？我希望流线与节点的颜色相同。 以下是我的代码:
-
所以我从昨天开始就一直在使用Javascript(Vue)和html（所以请原谅我的困惑），我不知道如何在更改链接的同时更改“home”链接描述旁边的图像的颜色。 我试过使用CSS类，它工作，但只改变图像颜色时，你实际上悬停在图像上，而不是整个链接线。除了CSS之外，我也尝试过通过“onmouseover”将图像改变为彩色版本，但不知怎么的，这将图标立即改变为彩色版本（？）。我猜问题是我通过一个：
-
问题内容： 我正在尝试使用javascript更改svg图像颜色。这可能吗？我可以将其加载为对象，然后以某种方式访问颜色/图像数据。 每一个回应或提示都将受到高度赞赏！ 问题答案： 当然，这是一个示例（省略了标准HTML样板）：
-
我可以知道一种通过Javascript改变谷歌地图标记颜色的方法吗..我是这方面的新手，任何帮助都将不胜感激，谢谢。 我使用以下代码创建标记