D3js（四）：箭头arrow
生活随笔
收集整理的這篇文章主要介紹了
D3js（四）：箭头arrow
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- D3js方式
- html+d3方式
D3js方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="http://d3js.org/d3.v3.min.js"></script></head> <body><svg width="300" height="200"></svg> </body><script>// 獲取 svgvar svg = d3.select('svg');//箭頭var marker =svg.append("marker").attr("id", "arrow").attr("markerUnits","strokeWidth")//設(shè)置為strokeWidth箭頭會(huì)隨著線的粗細(xì)發(fā)生變化.attr("viewBox", "0 0 12 12")//坐標(biāo)系的區(qū)域.attr("refX", 6)//箭頭坐標(biāo).attr("refY", 6).attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto")//繪制方向，可設(shè)定為：auto（自動(dòng)確認(rèn)方向）和 角度值.append("path").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")//箭頭的路徑.attr('fill', '#f00');//箭頭顏色// 繪制直線var line = svg.append("line").attr("x1",50).attr("y1",10).attr("x2",200).attr("y2",50).attr("stroke","red").attr("stroke-width",2).attr("marker-end","url(#arrow)");// 繪制曲線var curve = svg.append("path").attr("d","M20,70 T80,100 T160,80 T200,90").attr("fill","white").attr("stroke","blue").attr("stroke-width",2).attr("marker-start","url(#arrow)").attr("marker-mid","url(#arrow)").attr("marker-end","url(#arrow)");</script></html>html+d3方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <svg width="300" height="200"><defs><markerid="arrow"markerUnits="strokeWidth"markerWidth="12"markerHeight="12"viewBox="0 0 12 12"refX="6"refY="6"orient="auto"><path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #f00;"></path></marker></defs><line x1="0" y1="0" x2="200" y2="50" stroke="red" stroke-width="2" marker-end="url(#arrow)"/> --><path d="M20,70 T80,100 T160,80 T200,90" fill="white" stroke="red" stroke-width="2" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)"/> </svg> </body> </html>總結(jié)
以上是生活随笔為你收集整理的D3js（四）：箭头arrow的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： D3js（三）：force实例
- 下一篇： D3js（五）：tooltips