D3.js流程图树图如何实现 节点变色及节点连线变色

最近在研究流程图 需求为 节点动态添加    节点树可拖动   缩放   点击折叠节点    危险节点且节点连线变红色

改代码的过程 可谓一把辛酸泪

拖动 缩放 点击折叠节点 在另一篇博客里有写 包括如何调整树图的方向 (由于节点文字太多 相邻文字容易重合 不得不将树图横过来) 

此处指介绍如何 将想要的节点且节点连线变红色

此处为判断节点名称是否一致

如果不判断节点名称 可麻烦后端在返回的节点数据里添加标记 前端判断 是否有该属性即可

nodeEnter.append("rect")
    .attr("x", function(d) {     
    return 0
    })
    .attr("y", -8)
    .attr("width", function(d) {     
            return d.name.length*16
    })
    .attr("height",25)
    .attr("rx",10)
    .style("fill", function(d){
          if(d.name == '登陆表单爆破'){
            return "red"
          }else{
            return "green"
          }
      });

  nodeEnter.append("text")
    .attr("x", function(d) { return d.name.length*16/2})
    .attr("dy", "10")
    .attr("text-anchor", "middle")
    .text(function(d) { return d.name; })
    .style("fill", function(d){
          if(d.name == '登陆表单爆破'){
            return "#fff"
          }else{
            return "#2dbb8a"
          }
      })
    .style("fill-opacity", 1);

  link.enter().insert("path", "g")
      .attr("class", function(d){
        if(d.target.name == '登陆表单爆破'){
          return "isRed"
        }else{
          return "link"
        }
      })
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};//YES
        return diagonal({source: o, target: o});  //diagonal节点连接图.
      })
    .attr('marker-end', 'url(#arrow)');

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页