我就不多说废话了，我先展示下我的效果图。
rect.gif
要实现上面的思路也很简单。
创建SVG--->创建g元素--->添加rect--->再添加rect，并添加动画效果--->添加文字，还是跟上次一样，我不会多次重复的说明之前讲过的。
创建SVG
var totalPush = [];
totalPush.push(total);
//设置定义域和值域
var liner = d3.scale.linear()
.domain([0, total])//定义域
.range([0, width])//值域
.clamp(true);
var svg = d3.select(svgId)
.append("svg")
.attr("width", width)
.attr("height", height);
我来举个例子说明设置定义域和值域的意思，好比[0,300]是我们的期望值---定义域，然后[0,1]是我们的输入值--值域，如果要用数学函数这样表达我们可以这样liner(0)=0，liner(1) = 300，所以我们选择[0,1]的范围可以对应到[0,300]的范围，clamp设置为true的意思，当我值域超过了1，我就可以直接去取最大值。
创建g
var arcs = svg.selectAll("g")
.data(totalPush)
.enter()
.append("g")
添加rect
arcs.append("rect")
.style("fill", "#152F72")
.attr("width",total == 0 ? width : liner(total))
.attr("height", "20")
.attr("rx", "6")
.attr("ry", "6")
.style("fill", "#152F72")为设置颜色，rx,ry为长方形边缘弧度
添加rect，并写动画
//绘画矩形的宽度
arcs.append("rect")
.data(dataset)//数据源
.attr("fill", status == "10" ? "#3D5CDE":"#E66D47")
.attr("height", "20")
.attr("rx", "6")
.attr("ry", "6")
.attr("width",function(d){
return NumberFormat(liner(0),"1");
})
.transition()
.duration(2000)
.ease("linear")
.attr("width", function (d) {
return NumberFormat(liner(d), "1");
});
我这里把数据源dataset设置进去，宽度是从0开始，然后transition()开启动画，定义执行时间，和动画效果样式，.attr("width", function (d) {return NumberFormat(liner(d), "1");}); 这里和我之前attrTween不同，如果你使用了这个函数会报如下错误
d3.js:5 Uncaught TypeError: r is not a function
at SVGRectElement.<anonymous> (d3.js:5)
at a (d3.js:3)
at Object.c (d3.js:3)
at Rn (d3.js:1)
at Tn (d3.js:1)
为啥会这样，那可以转换吗？我的答案是我不知道，我尝试了自己能力的办法，未解决问题。
attr(name, value):通过指定的name和value过渡属性的值。过渡的初始值是当前属性值（一定要事先设定一个初始值，如果你不想坏的意外），结束值是指定的值。
attrTween(name, tween):根据指定的补间（tween）函数，通过指定的名称（name）过渡属性值。过渡的开始和结束值由补间函数决定。
添加文字
arcs.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return NumberFormat(d,"2");
})
.attr("fill", "white")
.attr("x", function(d, i) {//定义位置
if(liner(d)==0){
return liner(d)+5;
}else{
return liner(d)-32;
}
})
.attr("y", 16);
添加文字这里，有个x，表示X轴，Y表示Y轴
全部代码
JS
<script type="text/javascript">
$(function () {
var width = 180;//绘图横向的宽度
var dataset = [];
var total = 7705;//总量
dataset.push(3705.47);
monInBalanceD3Hormal(width, 20, "#monInBalance_pt_gkxxl", total, dataset,10);
});
/**
* @date:2018/4/18 16:13
* 功能: 资金出入和结算情况绘图
* @width 长度
* @height 高度
* @svgId 绘画SVG的ID
* @total 总量
* @dataset 数据集
* @status 状态码 10 收款金额，20付出金额，收负差额
*/
function monInBalanceD3Hormal(width, height, svgId, total, dataset,status) {
var totalPush = [];
totalPush.push(total);
//设置定义域和值域
var liner = d3.scale.linear()
.domain([0, total])//定义域
.range([0, width])//值域
.clamp(true);
var svg = d3.select(svgId)
.append("svg")
.attr("width", width)
.attr("height", height);
var arcs = svg.selectAll("g")
.data(totalPush)
.enter()
.append("g")
arcs.append("rect")
.style("fill", "#152F72")
.attr("width",total == 0 ? width : liner(total))
.attr("height", "20")
.attr("rx", "6")
.attr("ry", "6")
//绘画矩形的宽度
arcs.append("rect")
.data(dataset)//数据源
.attr("fill", status == "10" ? "#3D5CDE":"#E66D47")
.attr("height", "20")
.attr("rx", "6")
.attr("ry", "6")
.attr("width",function(d){
return NumberFormat(liner(0),"1");
})
.transition()
.duration(2000)
.ease("linear")
.attr("width", function (d) {
return NumberFormat(liner(d), "1");
});
//添加文字
arcs.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return NumberFormat(d,"2");
})
.attr("fill", "white")
.attr("x", function(d, i) {//定义位置
if(liner(d)==0){
return liner(d)+5;
}else{
return liner(d)-32;
}
})
.attr("y", 16);
}
function NumberFormat(num,digit){
digit = digit || 3;
var di=1;
for(var i=0;i<digit;i++){
di = di * 10;
}
return (Math.floor(num * di) / di);
}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/d3.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/jquery-3.0.0.min.js"></script>
html
<div id="container">
<div class="monInBalance_pt_div" id="monInBalance_pt_gkxxl">
</div>
</div>
css
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<link rel="stylesheet" type="text/css" href="../css/swiper.min.css">
<style type="text/css">
#container {
width: 100%;
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: column;
}
</style>
网友评论