如何使用d3.js制作可视化图表

2023-02-21 17:10:02JavaScript011

如何使用d3.js制作可视化图表,第1张

D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。

D3的特点

允许绑定任意数据到DOM，将数据驱动转换应用到Document中。

不仅可以创建精美的HTML表格，而且可以绘制折线图、柱形图和饼图等数据图表。

支持SVG，在Web页面上渲染毫无压力。

回到顶部

D3的使用方法

关于D3的具体用法，可以看D3图形库API参考这篇文章。本文主要对介绍一些经典图表的实现效果及代码。

index.html代码：

<!DOCTYPE html>

<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>

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图片区域点击".不规则的点击区域尚未找到插件。

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>

<ul>

<li>采购单编号：<input type="text" id="CGDBH" name="CGDBH" /></li>

<li>

供应商名称：<input type="text" id="GYSMC" name="GYSMC" />

</li>

</ul>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</form>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：css中clip 怎么用

# 下一篇：已知金属铯的逸出功为1.9eV，在光电效应实验中，要使铯表面

推荐阅读

热门文章

最新发布

标签列表

如何使用d3.js制作可视化图表

给您推荐相同类型的内容：