d3.js v7 - scaleOrdinal - 颜色与父链接相同

时间:2021-07-19 07:43:51

标签: javascript jquery d3.js

我在 d3 v3.5 中使用以下函数为子节点和链接着色,与在 scaleOrdinal() 中设置的父节点相同。

然而,虽然现在在 d3 v7 中使用 answer here 可以为子节点着色以匹配父节点,但链接没有被着色以匹配父链接。

const colourScale = d3.scaleOrdinal()
.domain( [ "Parent", "Child 1", "Child 2" ] )
.range( [ "#abacab", "#b67a4e", "#5a6fbb" ] );

...

 function findParent(datum) {
      if (datum.depth < 2) {
        return datum.name
      } else {
        return findParent(datum.parent)
      }
    }
    
    function findParentLinks(datum) {
      if (datum.target.depth < 2) {
        return datum.target.name
      } else {
        return findParent(datum.target.parent)
      }
    }

和应用:

var linkEnter = link.enter().insert('path', "g")
      .attr("class", "link")
      .attr("stroke-width", function(d) {
           return 1;
        })
      .attr('d', function(d){
        var o = {
            x: source.x0,
            y: source.y0
        }
        return diagonal(o, o)
      })
  .attr("opacity", "0.3")
   .style("stroke", function(d) {
                return colourScale(findParentLinks(d));
            });

关于解决这个问题的任何想法?见fiddle

0 个答案:

没有答案