D3.js绘制基本图形_d3.js 绘制3d图形-CSDN博客

本文链接：https://blog.csdn.net/qq_39355295/article/details/87477442

这篇博客介绍了如何使用D3.js进行数据可视化，包括条形图、折线图、散点图、简单堆栈图和带有折线图的堆栈图的绘制。作者强调了理解代码和适应不同版本D3.js的重要性，并提供了各类型图表的代码示例和效果展示。

摘要由CSDN通过智能技术生成

d3.js 绘制基本图形

最近开始学习d3.js 主要是，初步认识d3.js,并且运行D3.jsD3.js数据可视化（data visualization）环境.
因为之前没有接触郭d3，因为业务需求，需要绘制一系列的图表，所以上来直接学习绘制，刚开始经过一天的简单了解，懂得了d3绘制代码的基本格式，然后开始搜索自己需要的图形的基本模板，然后根据自己的实际业务需求来进行基本的更改，这样就需要我们对自己需要使用的代码，全程了解，这样我们就可以更加便捷的进行修改。下面是我最近三天自己绘制一些基本图形的代码：
这里注意:因为没有认真的学习过d3知识，在绘制时，因为不同版本的方法使用不同，所以我在引入d3的时候，会同时插入两个版本的d3,使用方法，

 <script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>

1、条形图

    首先贴上完整的代码进行展示：因为是是刚开始学习d3，所以代码里都做了基本的注释。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>条形图</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
    <style>
            .axis path,
            .axis line{
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            .axis text {
                font-family: sans-serif;
                font-size: 15px;
            }
    </style>
</head>
<body>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script type="text/javascript">

            //1、定义宽高
            var height = 600;
            var width = 600;

            //2、添加数据
            var dataset= [30,20,45,12,21,28,46,64,73,78,54];

            // var num = 15;

            //设置刷新事件，当没刷新一次数据变化一次，条形图也随之变化
            // for(var i = 0; i < 4; i++){ 
            //     var tempnum = Math.floor(Math.random() * 50);
            //     dataset.push(tempnum);
            // }
            // console.log(dataset);
    
            var svg = d3.select("body").append("svg")
                    .attr("width", width)
                    .attr("height", height);
    
            var xAxisScale = d3.scale.ordinal()
                    .domain(d3.range(dataset.length))
                    .rangeRoundBands([0, 500]);
    
            var yAxisScale = d3.scale.linear()
                    .domain([0, d3.max(dataset)])
                    .range([500, 0]);
    
            var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
            var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
    
            var xScale = d3.scale.ordinal()
                    .domain(d3.range(dataset.length))
                    .rangeRoundBands([0,500],0.05);
    
            var yScale = d3.scale.linear()
                    .domain([0,d3.max(dataset)])
                    .range([0,500]);
    
            // 绘制矩形
            svg.selectAll("rect")
                    .data(dataset)
                    .enter()
                    .append("rect")
                    // .on("click",  function(){
                    //     d3.select(this).attr("fill","black");
                    // }) // 添加点击事件
                    .attr("x", function(d,i){
                        return 100 + xScale(i);
                    } )
                    .attr("y",function(d,i){
                        return 50 + 500 - yScale(d) ;
                    })
                    .attr("width", function(d,i){
                        return xScale.rangeBand();
                    })
                    .attr("height",yScale)
                    .attr("fill", "steelblue")
                    .transition()
                    .duration(2000)
                    .ease("bounce")
                    .delay(1000)
                    .attr("fill","red");
    
            // 绘制文字标签
            svg.selectAll("text")
                    .data(dataset)