1、绘制箭头
效果：
代码：
<svg>
<line x1="50" y1="50" x2="100" y2="100" stroke="#000" marker-end="url(#arrow)"></line>
<line x1="50" y1="50" x2="100" y2="50" stroke="#000" marker-end="url(#arrow)"></line>
<line x1="50" y1="50" x2="50" y2="100" stroke="#000" marker-end="url(#arrow)"></line>
<defs>
<marker markerWidth="20" markerHeight="20" refX="10" refY="10" id="arrow" orient="auto">
<path d="M0 0 L10 10 L0 20 z" fill="none" stroke="blue"></path>
</marker>
</defs>
</svg>
注意点：
1）orient:auto ，要使自动方向正确工作，需要标记的前进方向为x方向（当未旋转时，用于标记的路径看起来像▶）
2）refX和refY定义三角与线连接的锚点坐标
2、为文字添加背景色
效果：
思路： 无法为SVG元素添加背景颜色，可以使用d3以编程方式执行此操作，运用text.node().getBBox()
代码：
//html中：
<svg>
<text style="font-size: 20px" x="100" y="100">测试</text>
</svg>
//js中：
var svg = d3.select('svg')
var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = svg.insert("rect", "text")
.attr("x", bbox.x - padding)
.attr("y", bbox.y - padding)
.attr("width", bbox.width + (padding*2))
.attr("height", bbox.height + (padding*2))
.style("fill", "red");
