D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。
D3的特点
允许绑定任意数据到DOM，将数据驱动转换应用到Document中。
不仅可以创建精美的HTML表格，而且可以绘制折线图、柱形图和饼图等数据图表。
支持SVG，在Web页面上渲染毫无压力。
回到顶部
D3的使用方法
关于D3的具体用法，可以看D3图形库API参考这篇文章。本文主要对介绍一些经典图表的实现效果及代码。
index.html代码：
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif
}
.y.axis path {
display: none
}
.y.axis line {
stroke: #fff
stroke-opacity: .2
shape-rendering: crispEdges
}
.y.axis .zero line {
stroke: #000
stroke-opacity: 1
}
.title {
font: 300 78px Helvetica Neue
fill: #666
}
.birthyear,
.age {
text-anchor: middle
}
.birthyear {
fill: #fff
}
rect {
fill-opacity: .6
fill: #e377c2
}
rect:first-child {
fill: #1f77b4
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 40, bottom: 30, left: 20},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
barWidth = Math.floor(width / 19) - 1
var x = d3.scale.linear()
.range([barWidth / 2, width - barWidth / 2])
var y = d3.scale.linear()
.range([height, 0])
var yAxis = d3.svg.axis()
.scale(y)
.orient("right")
.tickSize(-width)
.tickFormat(function(d) { return Math.round(d / 1e6) + "M" })
// An SVG element with a bottom-right origin.
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// A sliding container to hold the bars by birthyear.
var birthyears = svg.append("g")
.attr("class", "birthyears")
// A label for the current year.
var title = svg.append("text")
.attr("class", "title")
.attr("dy", ".71em")
.text(2000)
d3.csv("population.csv", function(error, data) {
// Convert strings to numbers.
data.forEach(function(d) {
d.people = +d.people
d.year = +d.year
d.age = +d.age
})
// Compute the extent of the data set in age and years.
var age1 = d3.max(data, function(d) { return d.age }),
year0 = d3.min(data, function(d) { return d.year }),
year1 = d3.max(data, function(d) { return d.year }),
year = year1
// Update the scale domains.
x.domain([year1 - age1, year1])
y.domain([0, d3.max(data, function(d) { return d.people })])
// Produce a map from year and birthyear to [male, female].
data = d3.nest()
.key(function(d) { return d.year })
.key(function(d) { return d.year - d.age })
.rollup(function(v) { return v.map(function(d) { return d.people }) })
.map(data)
// Add an axis to show the population values.
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis)
.selectAll("g")
.filter(function(value) { return !value })
.classed("zero", true)
// Add labeled rects for each birthyear (so that no enter or exit is required).
var birthyear = birthyears.selectAll(".birthyear")
.data(d3.range(year0 - age1, year1 + 1, 5))
.enter().append("g")
.attr("class", "birthyear")
.attr("transform", function(birthyear) { return "translate(" + x(birthyear) + ",0)" })
birthyear.selectAll("rect")
.data(function(birthyear) { return data[year][birthyear] || [0, 0] })
.enter().append("rect")
.attr("x", -barWidth / 2)
.attr("width", barWidth)
.attr("y", y)
.attr("height", function(value) { return height - y(value) })
// Add labels to show birthyear.
birthyear.append("text")
.attr("y", height - 4)
.text(function(birthyear) { return birthyear })
// Add labels to show age (separate not animated).
svg.selectAll(".age")
.data(d3.range(0, age1 + 1, 5))
.enter().append("text")
.attr("class", "age")
.attr("x", function(age) { return x(year - age) })
.attr("y", height + 4)
.attr("dy", ".71em")
.text(function(age) { return age })
// Allow the arrow keys to change the displayed year.
window.focus()
d3.select(window).on("keydown", function() {
switch (d3.event.keyCode) {
case 37: year = Math.max(year0, year - 10) break
case 39: year = Math.min(year1, year + 10) break
}
update()
})
function update() {
if (!(year in data)) return
title.text(year)
birthyears.transition()
.duration(750)
.attr("transform", "translate(" + (x(year1) - x(year)) + ",0)")
birthyear.selectAll("rect")
.data(function(birthyear) { return data[year][birthyear] || [0, 0] })
.transition()
.duration(750)
.attr("y", y)
.attr("height", function(value) { return height - y(value) })
}
})
您好：这个如果用js来实现的话估计会很难。并且表示自己之前找过同功能插件，但是没找到。网上那些效果都是基本上用flash来做的效果，指向后高亮或者立体感显示。不过js可以在一张图片上加区域即可。主要是<area>和<map>标签即可。然后设定范围坐标即可。不过这个是规则的图形，长方形或者正方形。不懂的可以百度"js图片区域点击".不规则的点击区域尚未找到插件。
<script type="text/javascript">var $ = function(id){
return document.getElementById(id)
}
//全选
function checkAll(target) {
var checkeds = document.getElementsByName("b_id")
for (var i = 0i <checkeds.lengthi++) {
checkeds[i].checked = target.checked
}
}
//刷新行号
function refreshRowNo() {
var tbody = $("tbody")
for (var i = 0i <tbody.rows.lengthi++) {
tbody.rows[i].cells[0].innerHTML = i + 1
}
}
//添加行
function AddRow() {
var tbody = $("tbody")
var row = tbody.insertRow(tbody.rows.length)
row.insertCell(row.cells.length)
row.insertCell(row.cells.length).innerHTML = '<input type="checkbox" name="b_id" />'
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="name" />'
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="number" />'
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="price" />'
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="sum" />'
refreshRowNo()
}
//删除行
function DelRow() {
var checkeds = document.getElementsByName("b_id")
var ischeck = false
for (var i = checkeds.length - 1i >= 0i--) {
if (checkeds[i].checked) {
ischeck = true
break
}
}
if (ischeck) {
if (confirm("确定删除选中行?")) {
for (var i = checkeds.length - 1i >= 0i--) {
if (checkeds[i].checked) {
var index = checkeds[i].parentNode.parentNode.rowIndex
$("tbody").deleteRow(index - 1)
}
}
refreshRowNo()
}
} else {
alert("请选中需要删除的行!")
}
}
//保存
function Save() {
var detail = [],
tbody = $("tbody")
for (var i = 0i <tbody.rows.lengthi++) {
var name = tbody.rows[i].cells[2].childNodes[0].value
var number = tbody.rows[i].cells[3].childNodes[0].value
var price = tbody.rows[i].cells[4].childNodes[0].value
var sum = tbody.rows[i].cells[5].childNodes[0].value
var item = name + "^" + number + "^" + price + "^" + sum
detail.push(item)
}
var detailstr = detail.join("|")
$("detail").value = detailstr
$("myform").submit()
}
</script>
<form name="myform" action="AddOrder.aspx" method="post">
<input type="hidden" id="detail" name="detail" />
<ul>
<li>采购单编号：<input type="text" id="CGDBH" name="CGDBH" /></li>
<li>
供应商名称：<input type="text" id="GYSMC" name="GYSMC" />
<input type="button" onclick="AddRow()" value="增加一行" />
<input type="button" onclick="DelRow()" value="删除" />
<input type="button" onclick="Save()" value="保存" />
</li>
</ul>
<table cellpadding="1" cellspacing="2">
<tr>
<th style="width:60px">序号</th>
<th style="width:20px"><input type="checkbox" onclick="checkAll(this)" /></th>
<th style="width:120px">名称</th>
<th style="width:120px">数量</th>
<th style="width:120px">单价</th>
<th style="width:120px">总金额</th>
</tr>
<tbody id="tbody">
<tr>
<td>1</td>
<td><input type="checkbox" name="b_id" /></td>
<td><input type="text" name="name" /></td>
<td><input type="text" name="number" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="sum" /></td>
</tr>
</tbody>
</table>
</form>
