d3.js入门-04svg

最新推荐文章于 2024-04-11 00:37:10 发布

yishuihanxun

最新推荐文章于 2024-04-11 00:37:10 发布

阅读量203

点赞数

文章标签： d3.js

本文链接：https://blog.csdn.net/yishuihanxun/article/details/103420340

版权

前几章讲了这么多，现在终于进入我们的正题了(画矢量图)

svg:可缩放矢量图形

这里我们使用两种方法创建矢量图：纯标签（基于html）的形式，js代码（基于html，d3.js）的形式

纯标签（基于html）的形式

创建画布svg，创建直线（（0,0）到（100,100））注意：svg画布默认（0,0）为左上角，整个画布为坐标轴的第四象限，y轴越往下数值越大，x轴越往右数值越大

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "100" height = "100">
      <line x1 = "0" y1 = "0" x2 = "100" y2 = "100" 
         style = "stroke:rgb(255,0,0);stroke-width:4"/>
      </svg>
   </body>
</html>

使用d3.js创建

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
		<div id="divSvg"></div>
		<script  language = "javascript">
			  var svg = d3.select("#divSvg")
			   .append("svg")
			   .attr("width",100)
			   .attr("height",100);
			   var cc = svg.append("line")
			   .attr("x1",0)
			   .attr("y1",0)
			   .attr("x2",100)
			   .attr("y2",100)
			   .style("stroke", "rgb(255,0,0)")
			   .style("stroke-width", 2);
			   console.log(svg);
			   console.log(cc);
		</script>
   </body>
</html>

创建矩形

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
	   <svg width = "300" height = "300">
	      <rect x = "0" y = "0" width = "300" height = "300" fill = "green"></rect>
	   </svg>
   </body>
</html>

d3.js

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>

	   
		<div id="divSvg"></div>
		<script  language = "javascript">
			  var svg = d3.select("#divSvg")
			   .append("svg")
			   .attr("width",100)
			   .attr("height",100);
			 var rect=  svg.append("rect")
			   .attr("x",0)
			   .attr("y",0)
			   .attr("width",100)
			   .attr("height",100)
		
		</script>
   </body>
</html>

圆形，椭圆与上边类似就不挨个演示了

yishuihanxun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
d3.js入门-04svg

前几章讲了这么多，现在终于进入我们的正题了(画矢量图)svg:可缩放矢量图形这里我们使用两种方法创建矢量图：纯标签（基于html）的形式，js代码（基于html，d3.js）的形式纯标签（基于html）的形式创建画布svg，创建直线（（0,0）到（100,100））注意：svg画布默认（0,0）为左上角，整个画布为坐标轴的第四象限，y轴越往下数值越大，x轴越往右数值越大&lt...
复制链接

扫一扫