D3.js 绘制带圆角的矩形 + 带箭头的指示线

目录

1. 添加带箭头的标线

2. 设置单个矩形盒子的宽高、偏移缩放效果

3. 添加 svg 元素，设置首次加载位置

4. 设置每个盒子纵横向的间距

5. 绘制矩形外层 box

6. 绘制矩形内层 box

7. 绘制矩形中的文字

8. 绘制括号和数字

9. 绘制带箭头的背景图片

10. 最终实现的效果

---

---

1. 添加带箭头的标线

• 如何给 svg线条 添加箭头标记？
• 给 svg线条 定义标记（ 定义在 <defs> 中 ），从而为 <line> 或 <path> 添加箭头

• ---

  <marker> 这个标签的作用？
• <marker> 是标记的主体，<marker> 中的 <path> 是标记的图形（此处是箭头的路径）
• 对于需要添加箭头的线段，设定其 marker-end 属性为 url(#arrow) 即可添加箭头

<defs>
  <!-- 添加带箭头的标线 -->
  <marker
    id="markerArrow"
    markerWidth="8"
    markerHeight="8"
    refx="2"
    refy="5"
    orient="auto"
  >
    <path d="M2,2 L2,8 L8,5 L2,2" style="fill: #61a8e0" />  
  </marker>
</defs>

---

2. 设置单个矩形盒子的宽高、偏移缩放效果

  // 盒子的宽高
  var boxWidth = 180,
  var boxHeight = 80;
  // 设置缩放和平移
  var zoom = d3.behavior.zoom()
    .scaleExtent([.1,1])
    .on('zoom', function(){
      svg.attr(
        "transform",
        "translate("
        + d3.event.translate
        + ") scale("
        + d3.event.scale
        + ")"
      );
  })
  // 偏移，防止第一次平移和缩放跳回原点
  .translate([150, 300]);

---

3. 添加 svg 元素，设置首次加载位置

var svg = d3
  .select("body")
  .append("svg")
  .attr("width", "100%")
  .attr("height", $(window).height())
  .call(zoom)
  .append("g")
  // 设置首次加载位置
  .attr("transform", "translate(200, 300)");

---

4. 设置每个盒子纵横向的间距

  var tree = d3.layout.tree()
    // 节点间横向和纵向的距离
    .nodeSize([150, 300])
    .separation(function(){
      return 1;
    })
    .children(function(person){
      return person._parents;
    });

  d3.json('./data.json', function(error, json){
    if(error) {
      return console.error(error);
    }
    // 获取模块和连接关系的数据
    var nodes = tree.nodes(json),
        links = tree.links(nodes);
      // Style links (edges)
      svg.selectAll("path.link")
          .data(links)
          .enter().append("path")
          .attr("class", "link")
          .attr("d", elbow)

    // Style nodes
    var node = svg.selectAll("g.person")
        .data(nodes)
        .enter().append("g")
        .attr("class", "person")
        .attr("transform", function(d) { 
          return "translate(" + d.y + "," + d.x + ")"; 
        });
    // ...

---

5. 绘制矩形外层 box

  // 绘制外层box
  node.append("rect")
    .attr({
      x: -(boxWidth/2),
      y: function(d){
        if (d.depth === 0) { // 这里是绘制第一个盒子
          return -50;
        } else {
          return -((60 + 19* Math.ceil(d.name.length/7))/2)
        }
      },
      width: boxWidth,
      height: function(d){
          if (d.depth === 0) {
            return 100
          } else {
            return 60 + 19* Math.ceil(d.name.length/7)
          }
      },
      fill: '#fff', // 填充色
      "stroke-width": 1, // 外层盒子的边框粗细
      rx: function(d) { // 外层盒子的弯曲角度
          if (d.depth === 0) {
              return 50
          } else {
            return (60 + 19* Math.ceil(d.name.length/7)) / 2
          }
      }
    })
    .attr("stroke", function(d){ // 让外层盒子的颜色采取传入的数组的颜色
      return d.boxColor
    })
    .attr('class', 'rect-wrap');

---

6. 绘制矩形内层 box

  // 绘制内层box
  node.append("rect")
    .attr({
      x: -(boxWidth/2) +5,
      y: function(d){
        if (d.depth === 0) {
          return -45;
        } else {
          return -((60 + 19* Math.ceil(d.name.length/7) - 10)/2)
        }
      },
      width: boxWidth -10,
      height: function(d){
        if (d.depth === 0) {
          return 90;
        } else {
          return 60 + 19* Math.ceil(d.name.length/7) - 10
        }
      },
      rx: function(d){
          if (d.depth === 0) {
              return 45
          } else {
            return (60 + 19* Math.ceil(d.name.length/7) - 10) / 2
          }
      },
      fill: '#fff',
      "stroke-width": 3
    })
    .attr("stroke", function(d){
      return d.boxColor
    })
    .attr('class', 'rect-outside'); 

---

7. 绘制矩形中的文字

• 盒子中的文字只能一行一行的写，并且要针对每一行设置单独的位置
• 第一行文字：

  // 第一行标题
  node
    .append("text")
    .attr("dy", function (d) {
      if (d.depth === 0) {
        return -10;
      } else {
        // 截取到的第一行文字
        if (d.name.length / 10 <= 1) {
          return -5;
        } else if (d.name.length / 10 > 1 && d.name.length / 10 <= 2) {
          return -15;
        } else {
          return -25;
        }
      }
    })
    .attr("text-anchor", "middle")
    .attr("class", "label")
    .attr("stroke", function (d) {
      // 设置文字外围颜色
      return d.boxColor;
    })
    .attr("stroke-width", 0.2) // 设置颜色外围宽度
    .text(function (d) {
      return d.name.substring(0, 10); // 这样表示截取到第一行文字
    });

• 第二行文字：

  node
    .append("text")
    .attr("dy", function (d) {
      if (d.name.length / 10 > 1 && d.name.length / 10 <= 2) {
        return 0;
      } else {
        return 10;
      }
    })
    .attr("text-anchor", "middle")
    .attr("class", "label")
    .attr("stroke", function (d) {
      return d.boxColor;
    })
    .attr("stroke-width", 0.2)
    .text(function (d) {
      return d.name.substring(10, 20); // 截取到第二行文字
    });

• 第三行文字：

  node
    .append("text")
    .attr("dy", 20)
    .attr("text-anchor", "middle")
    .attr("class", "label")
    .attr("stroke", function (d) {
      return d.boxColor;
    })
    .attr("stroke-width", 0.1)
    .text(function (d) {
      return d.name.substring(20, d.name.length);
    });

---

8. 绘制括号和数字

• 绘制第一个括号：

  node
    .append("text")
    .attr("dx", -20)
    .attr("dy", function (d) {
      if (d.depth === 0) {
        return 5;
      } else {
        if (d.name.length / 10 <= 1) {
          return 10;
        } else if (d.name.length / 10 > 1 && d.name.length / 10 <= 2) {
          return 15;
        } else {
          return 25;
        }
      }
    })
    .attr("class", "dividing-line")
    .attr("stroke", function (d) {
      return d.boxColor;
    })
    .attr("stroke-width", 0.5)
    .text(function (d) {
      return "(";
    });

• 绘制第一个数字：

  .append("text")
  .attr("dx", -5)
  .attr("dy", function (d) {
      if (d.depth === 0) {
      return 5;
    } else {
      if (d.name.length / 10 <= 1) {
        return 10;
      } else if (d.name.length / 10 > 1 && d.name.length / 10 <= 2) {
        return 15;
      } else {
        return 25;
      }
    }
  })
  .attr("class", "num1")
  .attr("stroke", function (d) {
    return d.boxColor;
  })
  .attr("stroke-width", 0.5)
  .text(function (d) {
    return d.num1;
  });

• 绘制第二个括号：

  node
    .append("text")
    .attr("dx", 13)
    .attr("dy", function (d) {
      if (d.depth === 0) {
        return 5;
      } else {
        if (d.name.length / 10 <= 1) {
          return 10;
        } else if (d.name.length / 10 > 1 && d.name.length / 10 <= 2) {
          return 15;
        } else {
          return 25;
        }
      }
    })
    .attr("class", "dividing-line")
    .attr("stroke", function (d) {
      return d.boxColor;
    })
    .attr("stroke-width", 0.5)
    .text(function (d) {
      return ")";
    });

---

9. 绘制带箭头的背景图片

    node
      .append("image")
      .attr("xlink:href", url2)
      .attr("x", -(boxWidth / 2) - 19)
      .attr("y", -9)
      .attr("fill", "#25723F")
      .attr("width", function (d) {
        if (d.depth === 0) {
          return 0;
        } else {
          return 30;
        }
      })
      .attr("height", 18); // 设置箭头的大小

---

10. 最终实现的效果