【D3.V3.js数据可视化系列教程】--（八）绘制SVG

最新推荐文章于 2021-06-09 21:51:56 发布
最新推荐文章于 2021-06-09 21:51:56 发布
阅读量1.3k 收藏
点赞数
分类专栏： d3.js

【D3.V3.js系列教程】--（八）绘制SVG

1、创建SVG

[html] view plain copy print ?
  1. //Width and height  
  2. var w = 500;  
  3. var h = 50;  
  4. var svg = d3.select("body")  
  5.             .append("svg")  
  6.             .attr("width", w)   // <-- Here  
  7.             .attr("height", h); // <-- and here!  
//Width and height
var w = 500;
var h = 50;
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)   // <-- Here
            .attr("height", h); // <-- and here!

2、数据驱动的SVG

var dataset = [ 5, 10, 15, 20, 25 ];
[html] view plain copy print ?
  1. var dataset = [ 5, 10, 15, 20, 25 ];  
var dataset = [ 5, 10, 15, 20, 25 ];
[html] view plain copy print ?
  1. var circles = svg.selectAll("circle")  
  2.                  .data(dataset)  
  3.                  .enter()  
  4.                  .append("circle");  
  5. circles.attr("cx", function(d, i) {  
  6.             return (i * 50) + 25;  
  7.         })  
  8.        .attr("cy", h/2)  
  9.        .attr("r", function(d) {  
  10.             return d;  
  11.        });  
var circles = svg.selectAll("circle")
                 .data(dataset)
                 .enter()
                 .append("circle");
circles.attr("cx", function(d, i) {
            return (i * 50) + 25;
        })
       .attr("cy", h/2)
       .attr("r", function(d) {
            return d;
       });

 

 

3、源码
 

 
 
 
  
 
   [html] 
    view plain 
   copy 
   print 
   ? 
  
 
 
 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.         <meta charset="utf-8">  
  5.         <title>testD3-7-drawSVG.html</title>  
  6.         <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>  
  7.     <style type="text/css">  
  8.         </style>  
  9.     </head>  
  10.     <body>  
  11.         <script type="text/javascript">  
  12.         //Width and height  
  13.             var w = 500;  
  14.             var h = 50;  
  15.               
  16.             //Data  
  17.             var dataset = [ 5, 10, 15, 20, 25 ];  
  18.               
  19.             //Create SVG element  
  20.             var svg = d3.select("body")  
  21.                         .append("svg")  
  22.                         .attr("width", 500)  
  23.                         .attr("height", 50);  
  24.   
  25.             var circles = svg.selectAll("circle")  
  26.                 .data(dataset)  
  27.                 .enter()  
  28.                 .append("circle");  
  29.   
  30.             circles.attr("cx", function(d, i) {  
  31.                         return (i * 50) + 25;  
  32.                     })  
  33.                    .attr("cy", h/2)  
  34.                    .attr("r", function(d) {  
  35.                         return d;  
  36.                    });  
  37.         </script>  
  38.   
  39.     </body>  
  40. </html>  
 

 

<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
		<title>testD3-7-drawSVG.html</title>
		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
	<style type="text/css">
		</style>
	</head>
	<body>
		<script type="text/javascript">
		//Width and height
			var w = 500;
			var h = 50;
			
			//Data
			var dataset = [ 5, 10, 15, 20, 25 ];
			
			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", 500)
						.attr("height", 50);

			var circles = svg.selectAll("circle")
			    .data(dataset)
			    .enter()
			    .append("circle");

			circles.attr("cx", function(d, i) {
						return (i * 50) + 25;
					})
				   .attr("cy", h/2)
				   .attr("r", function(d) {
						return d;
				   });
		</script>

	</body>
</html>
 

4、效果
 




                

        

        

    




    

      

        

            

              
                
                  Harry_Burt
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
d3.v3.min.js

				
			

			

				

					07-31
				

			

		

		

			
				
d3.v3.js是数据视图化非常棒的工具                                                                    
                                                                                            --2018-7-31

			
		

	



                

              
                



	

		

			

				
					
svg-fill：以单一颜色填充SVG的所有形状

				
			

			

				

					02-15
				

			

		

		

			
				
SVG填充
用单色填充所有形状的SVG。
 :warning: 当前使用简单的解决方案，该解决方案只是将具有所选填充颜色的填充属性添加到SVG元素。 对于没有样式属性的SVG（例如要组合成符号精灵的属性），这应该可以正常工作。 对于其他任何事情，结果都会是命中注定的。
用法
要求
Node.js> = 10
安装
npm install --save svg-fill
API
 简单用法：
 const SvgFill = require ( 'svg-fill' ) ;
// Instantiante SvgFill with your chosen fill
// color:
const svgFill = new SvgFill ( '#FF0000' ) ;
// SvgFill expects SVG data as a string or Buffer
const originalSvgD

			
		

	



                


  
              

                


	

		

			

				
					
数据可视化-canvas-svg-Echarts

				
			

			

				

					08-19
				

			

		

		

			
				
数据可视化代码

			
		

	





	

		

			

				
					
neo4jd3:使用D3.js的Neo4j图形可视化

				
			

			

				

					04-22
				

			

		

		

			
				
neo4jd3.js
 使用图形可视化。
特征
与和兼容。
 力模拟。
 信息面板，显示悬停时的节点和关系信息。
 双击回调。
 自定义节点颜色（按节点类型）。
 文本节点+图标节点+ SVG图像节点（例如，使用 ）。
 粘滞节点（拖动以粘住，单击以松开）。
 动态图更新（例如，双击一个节点以将其展开）。
 突出显示init上的节点。
 关系自动定向。
 缩放，平移，自动调整。
 与D3.js v4兼容。
跑步
首先，请确保您已安装了Ruby和无礼的宝石。 然后，克隆存储库，安装所有依赖项，构建并为项目提供服务。
 > gem install sass
> git clone https://github.com/eisman/neo4jd3.git
> npm install
> gulp
 在您喜欢的浏览器中打开http://localhost:8080 。
文献资料
var neo4

			
		

	



		

			
		



	

		

			

				
					
数据可视化-使用SVG和D3可视化浏览指标

				
			

			

				

					03-02
				

			

		

		

			
				
学习如何结合使用可缩放矢量图形(SVG)和开源D3JavaScript库创建数据可视化。形状、颜色和布局可能对从业务角度理解海量数据有很大的帮助。一个示例场景演示了如何使用SVG和D3来根据社交媒体的浏览指标创建...社交媒体站点（比如Twitter、Facebook和YouTube）提供了全面的Web服务接口来公开它们的功能。例如，YouTubeDataAPI支持应用程序将视频上传到YouTube，或播放一个网站上现有的YouTube视频。现在这些站点也在开发分析API。举例而言，YouTubeAnalyticsAPI向编程客户端提供了查看次数和喜欢次数（numberoflikes）等统计数

			
		

	





	

		

			

				
					
水平滚动时间轴

				
			

			

				

					05-26
				

			

		

		

			
				
一款非常漂亮  实用的时间轴插件

			
		

	





	

		

			

				
					
html 元素叠加,svg元素层/重叠/叠加/叠加

				
			

			

				

					weixin_39759441的博客
				

				

					06-09
					
					1123
					
				

			

		

		

			
				
为了让它们成为热插拔/可拖动/可缩放的，我一直在玩Mike Bostock的d3 three little circles示例。svg元素层/重叠/叠加/叠加，而这样做，我碰到一个问题(使用Firefox 16.0.2，顺便说一句 - 通常罚款SVG)偶然发现这虽然本身并不严重，莫名其妙的错误我：即虽然总是出现在生成的HTML，任何尝试在覆盖矩形可视区域与按钮元素失败。我试过以下每条建议在this...

			
		

	





	

		

			

				
					
【D3.js数据可视化系列教程】--（十五）SVG基本图形绘制

					
热门推荐

				
			

			

				

					司机大傻
				

				

					09-17
					
					1万+
					
				

			

		

		

			
				
SVG基本图形绘制

			
		

	





	

		

			

				
					
数据可视化D3相关记录

				
			

			

				

					weixin_43996598的博客
				

				

					06-04
					
					388
					
				

			

		

		

			
				
记载本学期数据可视化相关课程内容，主要为D3直方图、饼图、力导向图、地图相关记录。
文章目录直方图饼图力导向图地图
直方图
直方图是常见的几种数据可视化方式之一，横轴表示数据种类，纵轴表示数据大小，以柱体长短直观展示数据分布。
以以下数据为例，画一个辅以x轴，y轴的直方图。
var X = ['A','B','C','D','E'];
var Y = [5,8,3,6,12,9,];

画布
var svg=d3.select("body")
          .attr("width",w)
		  .

			
		

	





	

		

			

				
					
D3.js实现知识图谱（删除，隐藏，展开）

				
			

			

				

					菜菜我是谁的博客
				

				

					01-06
					
					7663
					
				

			

		

		

			
				
D3.js实现知识图谱（隐藏/删除/展开 ）

			
		

	





	

		

			

				
					
data-visualisation:使用 D3.js 的数据可视化项目

				
			

			

				

					07-02
				

			

		

		

			
				
数据可视化
基于D3.js构建的数据可视化示例集合。
 目前包括：
 toptwenty ：一种从 CSV 文件集合中提供多个“前 20 个”列表的简单方法。 允许动态更改列表的主题和列表的元素数量。 包括翻转文本以获取更多信息。
 wordlcoud ：一种从节点和有向边的数据集创建交互式 wordcloud 的简单方法。 允许拖动以更改布局并双击以突出显示连接的组件。
toptwenty.js
 从输入数据轻松创建交互式 SVG，显示多个“前 20”列表。 最终用户可以单击更改显示的条数或显示的数据。 可以接受任意数量的数据集。
用法：
 在您的页面中包含toptwenty.js ，然后使用以下语法调用toptwenty ： 
   	toptwenty ( svg_id ,
   			  h ,
   			  w ,
   			  font_family ,
   			  n

			
		

	





	

		

			

				
					
基于Javascript和D3.js的疫情可视化设计源码

				
			

			

				

					04-08
				

			

		

		

			
				
疫情可视化系统 - 基于Javascript和D3.js开发，包含28个文件，如JSON、CSV、JS、XML、GITIGNORE、CSS、SVG、LICENSE、IML和DS_STORE等。该系统使用D3.js完成中国疫情的可视化，包括中国地图的展示、使用brush的强...

			
		

	





	

		

			

				
					
D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit

				
			

			

				

					数星星等天明的博客
				

				

					04-22
					
					1万+
					
				

			

		

		

			
				
D3.js的v5版本入门教程（第四章）

    Update、Enter、Exit是D3.js中很重要的概念，下面来讲一下它们到底是什么？（当你看完后。你就会知道如果数据集个数和选择集个数不匹配的情况下使用data()，D3.js会怎么办）

    在使用data()时，例如现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个&lt;p&gt;绑定，但是，现在就有一个问题—...

			
		

	





	

		

			

				
					
D3.js  学习笔记

				
			

			

				

					林世广
				

				

					08-22
					
					1万+
					
				

			

		

		

			
				
路人甲：额，我需要学那么多才能开始学 D3 吗？心理压力有点点…大
馒头：不必，完全可以直接看“D3.js  学习笔记”学 D3，遇到不明白的地方，再看相关内容即可
路人乙：HTML、CSS 啥的，我从来都没用过，也没有关系吗？
馒头：只要在 W3School ，分别看看这几个词是什么意思，是用来干什么的，再看几个简单例子即可，没有必要全掌握了再学习 D3。

			
		

	





	

		

			

				
					
d3.js学习2----一些基本文本操作

				
			

			

				

					Pitter_Patter_Bee的专栏
				

				

					10-19
					
					3988
					
				

			

		

		

			
				
D3.JS
总的来说，D3是这样一个特殊的JavaScript库，它利用现有的Web标准，通过更简单的（数据驱动）方式来制作炫目的可视化效果。
先来看一下helloworld的实现----从HTML到javascript到d3.js的改进：


Html版：


 
   
         
        HelloWorld 
   
     
        

			
		

	





	

		

			

				
					
d3.js学习（时间轴-多折线图）

				
			

			

				

					qq_25687271的博客
				

				

					03-01
					
					6241
					
				

			

		

		

			
				
根据项目的要求，利用d3.js画出x轴为时间轴，多条折线的折线图，看了官方的文档和很多参考资料才做了出来。所以想分享给程序猿朋友们。（网上找的基本上都不满足需求。只能靠自己一步一步写下来）

成果曲线图：





step1: 准备数据

// 数据，{ x： 为时间轴，y： 相对应的值}

var trendData = [

[{'x':'2018-02-01','y':1},{'x...

			
		

	





	

		

			

				
					
【D3.js数据可视化系列教程】（十七）--通过键联结数据

				
			

			

				

					司机大傻
				

				

					11-02
					
					7276
					
				

			

		

		

			
				
通过键联结数据

			
		

	





	

		

			

				
					
【D3.V3.js系列教程】--（十四）有路径的文字

				
			

			

				

					weixin_34358092的博客
				

				

					09-18
					
					170
					
				

			

		

		

			
				
【D3.V3.js系列教程】--（十四）有路径的文字
1、 在 svg 中插入一個 text
 // 在 body 中插入一個 svg  
  var svg = d3.select('body').append('svg');
    
   
  // 在 svg 中插入一個 text
   
  svg.append('text')
   
  .attr('x', 10...

			
		

	





	

		

			

				
					
这是一个基于Objective-C语言的基础案例集。旨在用于给初学者快速了解Objective-C语言的语法。.zip

					
最新发布

				
			

			

				

					04-30
				

			

		

		

			
				
这是一个基于Objective-C语言的基础案例集。旨在用于给初学者快速了解Objective-C语言的语法。.zip

			
		

	





	

		

			

				
					
d3.js数据可视化项目

				
			

			

				

					05-18
				

			

		

		

			
				
好的，d3.js 是一个非常流行的 JavaScript 库，用于创建数据可视化。以下是一个简单的 d3.js 数据可视化项目的示例：  1. 首先，需要准备一个数据集。可以使用 CSV 文件或 JSON 格式的数据。  2. 然后，需要在 HTML ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值