1. 添加带箭头的标线

如何给 svg线条添加箭头标记？
给 svg线条定义标记（定义在 <defs> 中），从而为 <line> 或 <path> 添加箭头
<marker> 这个标签的作用？
<marker> 是标记的主体，<marker> 中的 <path> 是标记的图形（此处是箭头的路径）
对于需要添加箭头的线段，设定其 marker-end 属性为 url(#arrow) 即可添加箭头

<defs><!-- 添加带箭头的标线 --><markerid="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 nodesvar 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

  // 绘制外层boxnode.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

  // 绘制内层boxnode.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. 最终实现的效果

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

D3.js绘制颜色:RGB、HSL和插值 (V3版本)
转载地址:D3.js绘制颜色:RGB.HSL和插值 (V3版本) 如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation).D3提供了d3.intrerpolateRgb()来处 ...
d3js mysql_使用D3.js绘制地图并打点
本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件去网上下载要绘制地图的geoJson文件. 使用d3.json( ...
D3.js绘制树形图
1.什么是D3: data-driven-document,翻译为数据驱动的文档,是一种由数据来决定绘图流程的程序设计模型.简单说,D3是一个JavaScript的函数库,用来做数据可视化(将数据的各 ...
使用D3.js绘制重庆地图
重庆市地图json数据下载链接https://pan.baidu.com/s/19eZfuGGRY6JOrH9WnZJ5iw 密码h5f9 D3.js下载链接:https://pan.baidu.co ...
d3js绘制y坐标轴_使用D3.js 绘制折线图
在一个网站上绘制折线图使用了ant/g2,打包后的体积到了一兆多,这不行了,需要按需加载.但是它的支持不太友好,我尝试在官网上用它的方法来按需引入,不是缺这就是缺那,很不好用. 反正我这里只是画个折线 ...
D3.js 绘制柱状图
使用D3 V4版本绘制使用D3绘制柱状图,绘制效果如下: 使用D3绘制柱状图,先对需要绘制的图形拆解,主要分为以下几个部分: 1. 比例尺的定义 2. 坐标轴的绘制 3. 添加矩形 4. 修改坐标轴 ...
d3.js 绘制极坐标图(polar plot)
0.引言在极坐标系中,任意位置可由一个夹角和一段相对原点(极点)的距离表示.也就是说,我们可以用 (angle,r) 来表示极坐标系中的点. 1.数据假设我们有如下数据集[ [10, 0.2], ...
D3.js 绘制散点图
一.实现效果二.代码 1.创建svg var svg = d3.select('#mychart').append('svg').attr('width', width + margin.left ...
D3.js绘制竖向组织架构图
d3新手上路,记个笔记(*^_^*) 先上效果图: 主要参考:https://bl.ocks.org/mbostock/3184089 https://github.com/justincy/d3-p ...

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

1. 添加带箭头的标线

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

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

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

5. 绘制矩形外层 box

6. 绘制矩形内层 box

7. 绘制矩形中的文字

8. 绘制括号和数字

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

10. 最终实现的效果

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

最新文章

热门文章