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

最新推荐文章于 2026-04-02 08:49:32 发布

原创

最新推荐文章于 2026-04-02 08:49:32 发布 · 4k 阅读

标签

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