<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="d3.js"></script>
	<title>柱状图</title>
	<style type="text/css">
		.axis path,
		.axis line {
		    fill: none;
		    stroke: black;
		    shape-rendering: crispEdges;/*其中的shape-rendering属性是一个SVG属性，作用是让坐标轴和刻度线边缘更整齐*/
		}
		.axis text {
		    font-family: sans-serif;
		    font-size: 11px;
		}
	</style>
    <script type="text/javascript">
   window.onload=function(){
             <!-- ————————————————————————————制作柱状图———————————————————————————— -->
	      var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
	        11, 12, 15,20, 18, 17, 16, 18, 23, 25];//数据源
	       var width=500;
	       var height=100;
	       var barPadding =5;  // 柱子间隔
	       var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);
	       var rect=svg.selectAll("rect") .data(dataset).enter().append("rect")
	          .attr("x",function(d,i){return i * (width/dataset.length);}).attr("y",function(d){return height-d*4})
	          .attr("width",width/dataset.length - barPadding).attr("height",function(d){return d*4})
	          .attr("fill", function(d) {return "rgb(0, 0,"+(d * 10)+")"});
	       var text=svg.selectAll("text").data(dataset).enter().append("text").text(function(d){return d})
	       .attr("x", function(d, i) {return i * (width / dataset.length) + (width / dataset.length - barPadding)/2})
	       .attr("y", function(d) {return height - (d * 4) + 14;}).attr("font-family", "sans-serif")
	       .attr("font-size", "11px").attr("fill", "white").attr("text-anchor", "middle"); 
	       <!-- ————————————————————————————制作散点图———————————————————————————— -->
	       var dataArr = [
			                [11, 20], [480, 90], [250, 50], [100, 33], [330, 95],
			                [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
			              ];
	       var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
	       var circle=svg.selectAll("circle") .data(dataArr).enter().append("circle");
	           circle.attr("cx", function(d) {return d[0]}).attr("cy", function(d){return d[1]})
	           .attr("r", function(d) { return Math.sqrt(height - d[1])});
	       var text=svg.selectAll("text").data(dataArr).enter().append("text").text(function(d){return d[0]+","+d[1]});   
	           text.attr("x", function(d) {return d[0];}).attr("y", function(d) {return d[1];})
	           .attr("font-family", "sans-serif").attr("font-size", "11px").attr("fill", "red");
	    <!-- ————————————————————————————制作尺度———————————————————————————— -->
	     //domain():设置尺度的输入范围，参数以数组的形式传入。
	    //range() :输出范围的设置
	    var padding =30;
	    var xScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[0]})]).range([padding, width-padding*2]);
	    var yScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[1]})]).range([height-padding,padding]);
	    var rScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[1]})]).range([2, 5]);
	     //__________________________散点图+尺度_________________________________
	    var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
	       var circle=svg.selectAll("circle") .data(dataArr).enter().append("circle");
	           circle.attr("cx", function(d) {return xScale(d[0])}).attr("cy", function(d){return yScale(d[1])})
	           .attr("r", function(d) { return rScale(d[1])});
	       var text=svg.selectAll("text").data(dataArr).enter().append("text").text(function(d){return d[0]+","+d[1]});   
	           text.attr("x", function(d) {return xScale(d[0])}).attr("y", function(d) {return yScale(d[1])})
	           .attr("font-family", "sans-serif").attr("font-size", "11px").attr("fill", "red");
	     <!-- ————————————————————————————制作坐标轴 axis()———————————————————————————— -->  
	     var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5); //设置x轴
	     var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);//设置Y轴
	     svg.append("g").attr("class", "axis").attr("transform", "translate(0," + (height - padding) + ")").call(xAxis);  
	     svg.append("g") .attr("class", "axis").attr("transform", "translate(" + padding + ",0)").call(yAxis);  
	}     
 </script>
</head>
<body>

</body>
</html>

D3+svg 案例的更多相关文章

  1. d3.svg.line()错误：TypeError: d3.svg.line is not a function

    var line_generator= d3.svg.line() .x(function (d,i) { return i; }) .y(function (d) { return d; }) 错误 ...

  2. 如何用DAX实现查看每个月中不同类别排名前一位，以及一个简单的svg案例

    现在给大家带来的是如何用DAX实现查看每个月中不同类别的排名前一位,最终完成效果如下!!! 首先我们需要两张简单的表 基数表 和类别表 当我们创建好表之后,我们再创建一个表格,然后我们将类别表里的列值 ...

  3. [D3] SVG Graphics Containers and Text Elements in D3 v4

    SVG is a great output format for data visualizations because of its scalability, but it comes with s ...

  4. SVG案例：动态去创建元素createElementNS

    案例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  5. SVG 案例：动态去创建分支节点，当鼠标经过某个节点时，分支线会高亮

    css: <style> #div1{ width:780px; height:400px; background:#fff; margin:20px auto; overflow:hid ...

  6. d3 svg简单学习

    矩形 <rect x="/> 圆形 <circle cx="/> 椭圆 <ellipse cx="/> 线 <line x1=& ...

  7. svg操纵方案 基于 D3 还是 angular？

    之前还是想简单了, 现在重新写这篇.把逻辑拆分粒度的辨析,放到外面去. 问题提出:svg控制方案 基于 D3 还是 angular 根据这个,html 4种展现样式:普通的html,svg,2D ca ...

  8. svg + d3

    为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介 另附:c ...

  9. 使用d3.v3插件绘制出svg图

    众所周知,这个插件使用的svg技术,而IE8(包括IE8)之前的浏览器是不支持svg的 接下来看代码吧 从后台获取到带id和父id的目录数据[json格式] var module = requestU ...

随机推荐

  1. Win7 64位qt-windows-x86-msvc2015-5.6.0 DLL依赖库打包

    今天开始系统的学习QT,第一个测试的问题就是在纯净的系统中如何正常运行,也就是找出QT生成的exe的依赖库问题 网上搜了下可以简单粗暴的用 D:\Qt\Qt5.6.0\5.6\msvc2015\bin ...

  2. android技巧总结

    技巧1. 在写布局文件时,有时不需要给控件指定text值,但是又想知道他的位置是否是自己想要他在的位置.这种情况只有在运行时给他指定text值才能确切地知道它显示的位置. 现在有一种方法可以实现,即利 ...

  3. 21）pom 中的缺省值（default properties）

    1 引言 项目中build 时用到了maven-jar-plugin ,其中有一个 ${project.build.directory} <plugin> <artifactId&g ...

  4. 天气预报API(五)：城市代码--“新编码”和“旧编码” 对比

    参考一些博客.文章 来查找 测试 接口,后来发现两套城市编码标准,有点想法,故拿来对比分析. 注:新旧编码是个人主观叫法,只是为了方便称呼,可能有不当之处,请留言更正. 暂且称 中国天气网等网站使用的 ...

  5. 使用PouchDB来实现React离线应用

    最近听到有同学在讨论关于数据上传遇到离线的问题,因此在这里介绍一下PouchDB. PouchDB 是一个开源的javascript数据库,他的设计借鉴于Apache CouchDB,我们可以使用他来 ...

  6. UE4动作流程总结

    右键新窗口打开看大图

  7. day13---堡垒机

    1.业务需求 兼顾业务安全目标与用户体验,堡垒机部署后,不应使用户访问业务系统的访问变的复杂,否则工作将很难推进,因为没人喜欢改变现状,尤其是改变后生活变得更艰难 保证堡垒机稳定安全运行, 没有100 ...

  8. java - Stack栈和Heap堆的区别

    首先分清楚Stack,Heap的中文翻译:Stack—栈,Heap—堆.         在中文里,Stack可以翻译为“堆栈”,所以我直接查找了计算机术语里面堆和栈开头的词语:        堆存储 ...

  9. UML学习备忘

    两大类UML图: 行为图(behavior diagrams)和结构图(structure diagrams)     行为图将引导系统分析员分析且理清"系统该做些什么"?系统分析 ...

  10. 用Razor做静态页面生成器

    本来是用asp.net webpages做的博客网站,数据库用了一个陌生的本地数据库,只是觉得用起来很爽快,用新鲜的东西有一种刺激.后来数据库挂了,估计是存某个字段的时候出了问题,可是新鲜的东西,也不 ...