d3js V4 完整的柱形圖

本文轉載自查看原文 2018-01-16 14:28 1537 d3jsV4

最近學習d3js。最新版本是v4。我看得資料是v3版本的。有的API已經改變了。邊看老版本的demo，邊學習。把遇到改變的API記錄下來。

我看的是饅頭華華寫的教程（完整的柱形圖）：http://d3.decembercafe.org/pages/lessons/8.html

該例子V4版本的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完整的柱形圖</title>
    <style>
        .axis path,.axis line{fill:none;stroke:black;shape-rendering:crispEdges;}
        .axis text{font-family:sans-serif;font-size:11px;}
        .MyRect{fill:steelblue}
        .MyText{fill:white;text-anchor:middle;}
    </style>
</head>
<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        var width = 500;
        var height = 500;
        var rectWidth = 4;
        //畫布周邊的空白
        var padding = {left:30, right:30, top:20, bottom:20};
        //定義一個數組
        var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
        var svg = d3.select('body').append('svg').attr('width',width).attr('height',height);
//V4版本-start
        var xScale = d3.scaleBand()
                .domain(d3.range(0,dataset.length))
                .range([0,width-padding.left-padding.right]);
//V4版本-end
        var yScale = d3.scaleLinear()//V4版本
                .domain([0,d3.max(dataset)])
                .range([height-padding.bottom-padding.top,0]);
        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) + rectWidth/2;
                }).attr('y',function(d,i){
                    return yScale(d);
                }).attr('width',xScale.bandwidth() - rectWidth)
                .attr('height',function(d,i){
                    return height-padding.bottom-padding.top-yScale(d);
        }).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) + rectWidth/2;
        }).attr('y',function(d,i){
                    return yScale(d);
                }).attr('dx',function(){
                    return (xScale.bandwidth() - rectWidth)/2;//V4版本
                }).attr('dy',function(){
                    return 20;
                }).text(function(d){
                    return d;
                });

        svg.append('g')
                .attr('class','axis').attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")").call(d3.axisBottom(xScale));//d3.axisBottom(xScale)  --V4版本
        svg.append('g')
                .attr('class','axis').attr("transform","translate(" + padding.left + "," + padding.top + ")").call(d3.axisLeft(yScale));//d3.axisLeft(yScale) --V4版本
    </script>
</body>
</html>

代碼：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 D3.js：完整的柱形圖 D3.js 完整的柱形圖 d3js V4 力導向圖關於echarts.js 柱形圖 d3js樹狀圖tree Devexpress系列一之 ChartControl 柱形圖BarSideBySideSeries2D Python-繪制3D柱形圖 Highcharts 3D柱形圖；Highcharts 堆疊3D柱形圖；Highcharts 3D餅圖；Highcharts 3D圓環圖 echarts區間柱形圖 Vue和d3.js(v4)力導向圖force結合使用，v3版本升級v4