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"
          }
      });//在这里控制小方块的背景颜色绿色   d 代表后台数据，判断数据是否为你想要变色的那一个。

  nodeEnter.append("text")//此处为 控制节点文字的代码
    .attr("x", function(d) { return d.name.length*16/2})
    .attr("dy", "10")
    .attr("text-anchor", "middle")//此处为 控制节点文字方向的代码 有middle、start两种方式
    .text(function(d) { return d.name; })
    .style("fill", function(d){
          if(d.name == '登陆表单**'){
            return "#fff"
          }else{
            return "#2dbb8a"
          }
      })//在这里控制文字颜色白色   d 代表后台数据，判断数据是否为你想要变色的那一个。
    .style("fill-opacity", 1);

  link.enter().insert("path", "g")
      .attr("class", function(d){
        if(d.target.name == '登陆表单**'){
          return "isRed"
        }else{
          return "link"
        }
      })//在这里控制连线颜色红色色   d 代表后台数据，判断数据是否为你想要变色的那一个。在css里定义isred   .isRed{
  stroke: #f1602d;
}
      .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)');