d3.js

发表于

矩形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
g
    .append("rect")
    .attr("class", "rect")
    .attr("width", 100)
    .attr("height", 100)
    .attr("stroke", "#000")
    .attr("fill", "#eee")
	// x, y 起点位置
    .attr('x', (d, i) => {
   	// d 是元素本身
            return d;
        })
    .attr('y', (d, i) => {
            return d;
        })
     // 圆角
     .attr('rx', 4)
     .attr('ry', 4)
	 // 旋转
     .attr('transform', "translate(" + -65 + "," + -20 + ")")

// attr 属性的数值可以通过函数 return 
      .attr('width', (d) => {
      	const width = d.length * 18;
      	return width;
      })
// 颜色可以使用 rgba
	  .attr('stroke', 'rgba(181, 181, 181, 0.75)')

圆形

1
2
3
4
5
6
7
8
9
10
11
12
g.append('circle')
  // 圆的半径
  .attr('r', '5')
  // cx, cy 位置
  .attr('cx', (d, i) => {
 	 return d;
  })
  .attr('cy', (d, i) => {
  	 return d;
  })
  .style('fill', '#1890ff')
  .attr('cursor', 'pointer')

文字

1
2
3
4
5
6
7
8
9
10
11
12
13
g.append('text')
    .text('显示的文字')
    .attr('dy', '2em')
    .attr('dx', '1.2em')
    .attr('fill', '#fff')
    .attr("font-size", "18px")
    .attr('x', (d, i) => {
    	return d;
  	})
	.attr('y', (d, i) => {
    	return d;
  	})
	.style("font-family", fontfamily);

封装文本自动换行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// 参数
appendMultiText(
	container,			//文本的容器，可以是<svg>或<g> 
	str, 				//字符串
	posX, 				//文本的x坐标
	posY, 				//文本的y坐标
	width, 				//每一行的宽度，单位为像素
	fontsize, 			//文字的大小（可省略），默认为 14
	fontfamily			//文字的字体（可省略），默认为 simsun, arial
)

// 使用
    rectTextG
        .append('text')
        .text(function (d,i) {
            if(d.data.name.length >= 6) {
                appendMultiText(d3.select(rectTextG._groups[0][i]), d.data.name, -58, -18, 104,14);
                return '';
            }
            return d.data.name;
        });

function appendMultiText(container, str, posX, posY, width, fontsize, fontfamily){
			
			if( arguments.length < 6){
				fontsize = 14;
			}		
			
			if( arguments.length < 7){
				fontfamily = "simsun, arial";
			}
			
			//
			var strs = splitByLine(str,width,fontsize);
			
			var mulText = container.append("text")
				.attr("x",posX)
				.attr("y",posY)
				.style("font-size",fontsize)
				.style("font-family",fontfamily);
				
			mulText.selectAll("tspan")
				.data(strs)
				.enter()
				.append("tspan")
				.attr("x",mulText.attr("x"))
				.attr("dy","1em")
				.text(function(d){
					return d;
				});
				
			return mulText;
			
			function splitByLine(str,max,fontsize){
				var curLen = 0;
				var result = [];
				var start = 0, end = 0;
				for(var i=0;i<str.length;i++){
					var code = str.charCodeAt(i);
					var pixelLen = code > 255 ? fontsize : fontsize/2;
					curLen += pixelLen;
					if(curLen > max){
						end = i;
						result.push(str.substring(start,end));
						start = i;
						curLen = pixelLen;
					}
					if( i === str.length - 1 ){
						end = i;
						result.push(str.substring(start,end+1));
					}
				}
				return result;
			}
}

重新刷新视图

1
2
3
4
// 清空 SVG 中的内容，重新绘制
d3.select('#svgID')
  .selectAll('*')
  .remove();
本文结束，感谢您的阅读