Question

在d3.js v3中，我的树中有colouring of decendant nodes和链接。

迁移到v5后，此操作已中断，不确定原因。

V5代码：

var colourScale = d3.scaleOrdinal()
    .domain(["MD", "Year 1", "Year 2", "Year 3", "Year 4"])
    .range(["#abacab", "#53e28c", "#4b80fa", "#eab014", "#bd57fe"]);

和

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)
    }
}

和

// Update the node attributes and style
nodeUpdate.select('circle.node')
    .attr('r', 7)
    .attr("fill-opacity", "0.7")
    .attr("stroke-opacity", "1")
    .style("fill", function(d) {
        if (d.class === "found") {
            return "#ff4136"; //red
        } else {
            return (typeof d._children !== 'undefined') ? (colourScale(findParent(d))) : '#FFF';
        }
    })
    .style("stroke", function(d) {
        if (d.class === "found") {
            return "#ff4136"; //red
        } else {
            return colourScale(findParent(d));
        }
    });

...

    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({
                source: o,
                target: o
            });
        })
        .attr("opacity", "0.3")
        .style("stroke", function(d) {
            return colourScale(findParentLinks(d));
        });

...

Answer 1

在D3 v5中，您要查找的属性（name位于名为data的对象内，该对象由层次结构生成器自动创建。

因此，应该是：

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

这是更新的JSFiddle：https://jsfiddle.net/5uc2g9sw/

移至d3 v5后颜色子代节点和链接断开

1 个答案: