D3 Examples - 动态交互柱状图

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
//画布大小
var width = 400;
var height = 400;
​
//在 body 里添加一个 SVG 画布   
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
//定义一个数组
var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
//画布周边的空白
 var padding = {left:30, right:30, top:20, bottom:20};
//x轴的比例尺
// var xScale = d3.scaleOrdinal()
//     .domain(d3.range(dataset.length))
//     .range([0, width - padding.left - padding.right]);
    
var xScale = d3.scaleBand().domain(d3.range(dataset.length)).rangeRound([0, width - padding.left - padding.right]);
console.log(xScale.bandwidth());
//y轴的比例尺
var yScale = d3.scaleLinear()
    .domain([0,d3.max(dataset)])
    .range([height - padding.top - padding.bottom, 0]);
var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale);
​
    var rectPadding =4;
    console.log(yScale(40));
    
    //添加矩形元素
var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
​
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
//         .attr("y",function(d){
//           var min = yScale.domain()[0];
//           return yScale(min);
//         })
//         .transition()
//         .duration(2000)
//         .ease(d3.easeBounce)
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("width", xScale.bandwidth() - rectPadding )
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        })
        .attr('fill',"steelblue")
        .on('mouseover', function(){
          d3.select(this).attr('fill','yellow');
        })
        .on('mouseout', function(d, i){
          d3.select(this).transition().duration(500).attr('fill','steelblue')
          
        })
​
​
​
    //添加文字元素
var texts = svg.selectAll(".MyText")
        .data(dataset)
        .enter()
        .append("text")
        .attr("class","MyText")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return  xScale(i) + rectPadding/2 ;
        } )
.attr("y",function(d){
    var min = yScale.domain()[0];
    return yScale(min);
})
.transition()
.delay(function(d,i){
    return i * 200;
})
.duration(2000)
.ease(d3.easeBounce)
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("dx",function(){
            return (xScale.bandwidth() - rectPadding)/2;;
        })
        .attr("dy",function(d){
            return 20;
        })
        .text(function(d){
            return d;
        });
    //添加x轴
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis); 
​
//添加y轴
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(" + padding.left + "," + padding.top + ")")
  .call(yAxis);
  </script>
</body>
​
    