在D3 / Javascript中更改Sankey圖的鏈接顏色

Question

我在弄清楚如何更改節點之間鏈接的顏色時遇到了麻煩。 好吧，我知道如何直接更改顏色，但是似乎無法弄清楚如何將if語句放入Sankey的js代碼中。

我需要一個if語句來使大於30的任何“值”具有紅色鏈接，如果它們小於30，則為灰色或＃000。

這是值大於30時要尋找的紅色：

這是代碼，我正在談論的值類似於以下內容：{“ source”：0，“ target”：2，“ value”：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"); 

Answer 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>