在此之前，我們學(xué)習(xí)了柱狀圖和餅圖的制作穿肄，了解了比例尺年局，坐標(biāo)軸的建立，學(xué)會了數(shù)據(jù)綁定和一些自定義交互事件咸产。這一節(jié)矢否，我們將使用d3模仿echart的氣泡圖，學(xué)習(xí)散點圖的制作脑溢，并復(fù)習(xí)鞏固一下之前的知識僵朗。
這一節(jié)用到的知識點比較多，但是難度不高屑彻，我們直接進(jìn)行圖形繪制验庙，用到時再詳細(xì)講解。
準(zhǔn)備的數(shù)據(jù)
const circle_data =[
{
apple: [
[0.5, 0.5],
[1.6, 0.6],
[1.2, 1.7],
[1.5, 1.8],
[1.9, 0.6],
[1.4, 2],
[2, 2.5],
[2.1, 2]
]
} ,
{
banana: [
[1.1, 2.3],
[1.8, 1.8],
[1.1, 2],
[1.3, 4],
[1.7, 0.8],
[1.2, 4.3],
[2.5, 2.5],
[3.5, 3.5],
[5, 5]
]
}
]
構(gòu)建坐標(biāo)軸
由于x軸的數(shù)據(jù)和y軸的數(shù)據(jù)都是數(shù)值型社牲，存在一定的連續(xù)性粪薛，因此x軸和y軸都采用線性比例尺。注意搏恤，x,y軸可以 任意值 為起始點
const data = circle_data
var initWidth = 340
var initHeight = 500
var padding = { left:40, top:20, right:20, bottom: 20}
var height = initWidth - padding.top - padding.bottom
var width = initHeight - padding.left - padding.right
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("padding-left", padding.left)
.style("padding-right", padding.right)
.style("padding-top", padding.top)
.style("padding-bottom", padding.bottom)
//添加y軸坐標(biāo)軸
//y軸比例尺
let nums =[] //把y軸方向的數(shù)據(jù)放在一個數(shù)組內(nèi)违寿，取最大最小值確定y軸比例
data.forEach((e, i) => {
for(var v in e){
nums = [...nums, ...e[v]]
}
})
let ydata = nums.map(function(e, i){ return e[1]})
let yScale = d3.scaleLinear()
.domain([d3.min(ydata), d3.max(ydata)])
.range([height , 0]);
let _yScale = d3.scaleLinear()
.domain([d3.min(ydata), d3.max(ydata)])
.range([0, height]);
//定義y軸
let yAxis = d3.axisLeft(yScale);
//添加y軸
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + 0 + "," + 0 + ")")
.call(yAxis);
//添加x軸坐標(biāo)軸
//x軸比例尺
let xData = nums.map(function(e, i){ return e[0]})
let xScale = d3.scaleLinear()
.domain([d3.min(xData), d3.max(xData)])
.range([0, width]);
//定義x軸
let xAxis = d3.axisBottom(xScale)
//添加x軸
svg.append("g")
.attr("class","axis--x")
.attr("transform","translate(" + "0 ," + height + ")")
.call(xAxis);
建立坐標(biāo)軸
添加網(wǎng)格
為圖表插入網(wǎng)格線很簡單，就是生成兩個標(biāo)記尺寸為背景大小的axis組件熟空，然后和橫縱軸重疊就可以了
// 定義橫軸網(wǎng)格線
function make_x_gridlines() {
return d3.axisBottom(xScale)
.ticks(10) //設(shè)定坐標(biāo)軸的分隔數(shù)藤巢，默認(rèn)是10
}
// 定義縱軸網(wǎng)格線
function make_y_gridlines() {
return d3.axisLeft(yScale)
.ticks(10)
}
// 添加橫軸網(wǎng)格線、
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines()
.tickSize(-height) //設(shè)定坐標(biāo)軸內(nèi)外刻度的長度痛阻。默認(rèn)是6
.tickFormat("") //讓所有的tick都沒有標(biāo)注
)
// 添加縱軸網(wǎng)格線
svg.append("g")
.attr("class", "grid")
.call(make_y_gridlines()
.tickSize(-width)
.tickFormat("")
)
grid
添加點
下面介紹一下svg 的基本元素circle, 它的位置屬性包括：
- cx 圓心在x軸上的坐標(biāo)
- cy 圓心在y軸上的坐標(biāo)
- r 圓的半徑
為了使svg的dom結(jié)構(gòu)更加清晰和更易操作菌瘪，可以新建g層（包裹層），把不同的類型的circle放在各自的g層內(nèi)阱当，例如此例中俏扩，新建的ｇ層class 分別設(shè)置成了“apple" "banana", 內(nèi)部的circle的class分別設(shè)置成了”circle_apple" "circle_banana",這樣在后期對svg元素的操作將更加便捷
var colors = ['rgba(245,0,87,0.75)',' rgba(63,81,181,0.75)']
//添加circle包裹層，有幾種類型添加幾個
var cover = svg.append("g")
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class", function(d, i){
for(var v in d) return v
})
//添加circle
cover.selectAll("circle")
.data(function(d){
for(var v in d) return d[v]
})
.enter()
.append("circle")
.attr("cx", function(d){
return xScale(d[0])
})
.attr("cy", function(d){
return height - _yScale(d[1])
})
.attr("r", function(){
let t = Math.random()*20
return t > 8 ? t : t + 8
})
.attr("class", function(){
return "circle_" + d3.select(d3.select(this)._groups[0][0].parentNode).attr("class")
})
.attr("fill", function(){
let t = d3.select(d3.select(this)._groups[0][0].parentNode).attr("class")
data.forEach(function(e, i){
for(let v in e) v === t ? t = i : ""
})
return colors[t]
})
添加點
給點添加一些交互事件
給氣泡添加移入移除事件弊添，動態(tài)改變其半徑录淡，增加收縮動畫
對于移入移出時，每個圓點上部都添加了其所屬類別的提示文字油坝，這里我們采用了一種比較取巧 的方法嫉戚，即全局添加一個text元素刨裆，在鼠標(biāo)移入到circle時，動態(tài)改變其位置和內(nèi)容
//添加每個原點上部的提示文字
let showtext = svg.append("text")
.text("")
.attr("font-size", '14px')
` covers.selectAll("circle")
..... //接上
.attr("fill", function(){
let t = d3.select(d3.select(this)._groups[0][0].parentNode).attr("class")
data.forEach(function(e, i){
for(let v in e) v === t ? t = i : ""
})
return colors[t]
})
.on("mouseover",function(d){
let self = this;
d3.select(this)
.transition()
.duration(200)
.attr("r", d3.select(this).attr("r") * 1.6)
showtext.attr("x", function(){
return xScale(d[0])
})
.attr("y",function(){
return height - _yScale(d[1]) - d3.select(self).attr("r") * 1.6
})
.text(function(){
return String(d3.select(self).attr("class").split("_")[1])
})
.attr("text-anchor","middle")
.attr("fill", function(){
let t = d3.select(d3.select(self)._groups[0][0].parentNode).attr("class")
data.forEach(function(e, i){
for(let v in e) v === t ? t = i : ""
})
return colors[t]
})
})
.on("mouseout",function(){
d3.select(this)
.transition()
.duration(200)
.attr("r", d3.select(this).attr("r") / 1.6)
showtext.text("")
})
mouse
添加左側(cè)提示欄顏色塊及交互事件
新添加包裹層g, 左側(cè)提示欄內(nèi)容都放在g層中彬檀，這里命名為detail
由于在上面給不用類型的circle添加了不同的class,因此在鼠標(biāo)移入移出顏色塊的時候帆啃，可以很容易通過class操作相應(yīng)的circle元素
//添加左側(cè)提示部分包裹層
let detail = cover.append("g")
//提示部分顏色塊
let rect = detail.append("rect")
.attr("width", 10)
.attr("height", 10)
.attr("fill", function(d, i){
let t = d3.select(d3.select(this)._groups[0][0].parentNode.parentNode).attr("class")
data.forEach(function(e, i){
for(let v in e) v === t ? t = i : ""
})
return colors[t]
})
.attr("transform", function(d, i){
return `translate(10, ${(i)*20})`
})
.on("mouseover", function(d){
let t = d3.select(d3.select(this)._groups[0][0].parentNode.parentNode).attr("class")
var circles = d3.selectAll('.circle_'+ t)
circles._groups[0].forEach(function(e, i){
d3.select(e)
.transition()
.duration(200)
.attr("r", d3.select(e).attr("r") * 1.6 )
})
})
.on("mouseout", function(d){
let t = d3.select(d3.select(this)._groups[0][0].parentNode.parentNode).attr("class")
var circles = d3.selectAll('.circle_'+ t)
circles._groups[0].forEach(function(e, i){
d3.select(e)
.transition()
.duration(200)
.attr("r", d3.select(e).attr("r") / 1.6 )
})
})
block
添加詳情欄文字
詳情欄文字直接位置由色塊決定，因此參考上方色塊定位窍帝，同時使用dx dy對文字的位置進(jìn)行微調(diào)
// 提示部分文字
let text = detail.append("text")
.text(function(d, i){
for(let v in d)
return v
})
.attr("transform", function(d, i){
return `translate(25, ${(i)*20})`
})
.attr("font-size", '12px')
.attr("dy",function(){
return '0.8em'
})
.attr("fill", function(){
return '#666'
})
最終效果
最終效果
有時候我們可能需要框選一部分點的數(shù)據(jù)來進(jìn)行下一步操作努潘，由于鼠標(biāo)框選事件在不單獨(dú)設(shè)置的時候會與鼠標(biāo)其他事件沖突，因此新建了一份文件坤学，源碼在下部疯坤，有興趣的朋友可以看一下
框選事件
本文圖例源碼
