更改 D3 中桑基图的链接颜色 / Javascript

Question

我无法弄清楚如何更改节点之间链接的颜色。好吧，我知道如何直接更改颜色，但似乎无法弄清楚如何在 Sankey 的 js 代码中放入 if 语句。

我需要一个 if 语句来使 30 以上的任何 "values" 具有红色链接，如果它们低于 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>

更改 D3 中桑基图的链接颜色 / Javascript

Change Color of Links for Sankey Diagram in D3 / Javascript

javascript

d3.js

sankey-diagram