<!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. py2exe 打包scipy时遇到的问题

    最近写了个小程序,用PyQt5做的界面,写完之后用py2exe打包成独立的exe文件,运行正常. 后来由于需要,调用SciPy.io.loadmat,改写setup.py,打包之后运行错误,提示: T ...

  2. centos7.2进入单用户模式

    1 - 在启动grub菜单,选择编辑选项启动 2 - 按键盘e键,来进入编辑界面 3 - 找到Linux 16的那一行,将ro改为rw init=/sysroot/bin/sh 4 - 现在按下 Co ...

  3. [转]如何拷贝一个 SQL Server 的表

    这篇短文将介绍几种拷贝 SQL Server 表的方法.第一种方式是最简单的在同一个数据库里将表拷贝到另外一个表.你需要记住的是,拷贝表的时候并不会拷贝表的约束和索引.下面是代码模板和简单的使用方法: ...

  4. 『TCP/IP详解——卷一:协议』读书笔记——17

    2013-08-27 15:37:42 6.5 ICMP端口不可达差错 端口不可达报文是ICMP差错报文的一种,它是ICMP不可达报文中的一种,以此来看一看ICMP差错报文中所附加的信息.使用UDP来 ...

  5. (转)如何为你的Viewcontroller瘦身

    View controllers are often the biggest files in iOS projects, and they often contain way more code t ...

  6. Unity 通过 www 下载 assetbundle , 在 iOS9 设备无法下载的问题

    我们项目是通过 www 下载 Assetbundle 来实现热更新的, 在 iOS 8上一切正常,但在 iOS9 设备上发现无法下载,跟踪调试发现以下错误信息 “App Transport Secur ...

  7. CodeSoft随笔 批量连续打印,变量打印,codesoft条码

    调用codeSoft的模板,实现批量连续打印. Code: 制作标签1.lab. 添加两个变量var0,var1. using LabelManager2; string strFile = Syst ...

  8. C#与C++的区别!

    (1) 编译目标:C++代码经常编译成汇编语言.而C#则编译成中间语言(IL)它与Java的字节代码有些相似.IL随后在通过Iust-In-Time编译进程转换成本机的可执行代码.IL代码将作为一个装 ...

  9. word 多级列表设置

    今天写论文碰到了这个问题, 希望能出现这样的效果: 第一章 1.1 1.2 第二章 2.1 2.2 ...... 为了达到这个效果,晕死了.因为我的标题不是普通的默认标题一标题二   比如同济一标题 ...

  10. iOS图片如何按比例显示

    文/罚难(简书作者)原文链接:http://www.jianshu.com/p/ec7d3f210983著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 只需加这么一段代码,如下: im ...