d3实现横向柱状图数据展示（V4）

来源：互联网发布：贝佳斯白泥怎么样知乎编辑：程序博客网时间：2024/05/20 05:07

一、最终实现效果

二、实现步骤

1、在现有的id为chart的div中添加一个长宽都是300的SVG元素

var svg = d3.select('#chart')
.append('svg')
.attr('width','300')
.attr('height','300')

2、在绘制矩形之前，我们给出一组数据[ 0.5 , 2 , 1 , 1.3 , 0.9]，由于数据过小，绘制矩形的宽度也会过于狭窄，所以我们需要用比例尺来实现一种映射关系

var dataset = [ 0.5 , 2 , 1 , 1.3 , 0.9]
var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scaleLinear() //v4更改，返回线性比例尺
.domain([min, max])
.range([10, 200]); //将 dataset 中最小的值，映射成10；将最大的值，映射成 200。

3、绘制矩形，交互操作必须放在过渡的前面的，否则会报错

var rects = svg.selectAll('rect') //选择svg内所有的矩形
.data(dataset) //绑定数组
.enter() //指定选择集的enter部分
.append('rect') //添加足够数量的矩形元素
.attr('x','20') //矩形距离左上角的x坐标
.attr('y',function(d,i){return i*25}) //矩形距离左上角的x坐标
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow");
}) //光标放在矩形上时填充变色
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","steelblue");
}) //光标离开矩形上时填充变色
.transition() //启用动画
.duration(2000) //过渡持续时间
.attr('width',function(d){return linear(d)}) //宽度按比例尺给定
.attr('height',20)
.attr("fill","steelblue") //填充颜色不要写在CSS里

4、绘制文字，主要是文字的位置校准

var texts = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("x", function(d){return linear(d)+25}) //左上角
.attr("y",function(d,i){return i*25+15}) //基线（文字底部）
.text(function(d){
return d;
});

5、绘制坐标轴，坐标轴的刻度并不是我们写多少就有多少，而是默认有固定的值，当你写的数值和固定值相近时，显示固定值

var axis = d3.axisBottom()//V4更改，比例尺的位置
.scale(linear)
.ticks(4);//指定比例尺刻度

svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)")
.call(axis); //axis(svg)

三、源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>d3</title>
<script src="https://cdn.bootcss.com/d3/4.10.0/d3.min.js"></script>
<style>
html,body{
margin:0;
padding:0;
}
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.MyText{
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
var dataset = [ 0.5 , 2 , 1 , 1.3 , 0.9]
var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scaleLinear()//比例尺
.domain([min, max])
.range([10, 200]);

var svg = d3.select('#chart')
.append('svg')
.attr('width','300')
.attr('height','300')//添加一个宽高都是300的svg

//添加矩形
var rects = svg.selectAll('rect')//选择svg内所有的矩形
.data(dataset)//绑定数组
.enter()//指定选择集的enter部分
.append('rect')//添加足够数量的矩形元素
.attr('x','20')
.attr('y',function(d,i){return i*25})
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","steelblue");
})
.transition()
.duration(2000)
.attr('width',function(d){return linear(d)})//比例尺在宽度时给定
.attr('height',20)
.attr("fill","steelblue") //填充颜色不要写在CSS里

//添加文字
var texts = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("x", function(d){return linear(d)+25}) //左上角
.attr("y",function(d,i){return i*25+15}) //基线（文字底部）
//.attr("dx",function(d){return linear(d)})
// .attr("dy",'20')
.text(function(d){
return d;
});

//定义坐标轴
var axis = d3.axisBottom()//比例尺的位置
.scale(linear)
.ticks(4);//指定比例尺

console.log(axis);

svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)")
.call(axis); //axis(svg)
</script>
</body>
</html>

阅读全文

0 0