D3js v4版本画散点图

作者: 喵喵同学嘛 | 来源:发表于2019-05-12 20:02 被阅读0次

D3js v4版本画散点图
D3js V4版本饼图
D3js V4版本画柱状图
webpack4迁移
d3.event.transform不能用了
如何使用v4版本styled-components的全局样式？
Android Studio：解决DataBinding v4包
webpack stats.toJson().modules[
React-Router 入门知识
秩和相关

前一段时间在学习D3js，网上很多的例子都是针对v3版本的例子，其实和v4版本的差异还是挺大的。把之前做的一些列子分享出来，大家一起学习进步。
本次画的是基本的散点图，效果图、代码如下，就不过多的介绍了，应该看代码就明白了

image.png

<!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>Document</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        #container{
            margin: 20px;
            /* background: black; */
        }
        .title{
            stroke: blueviolet;
        }
        svg{
            background: #000;
        }
        .axis path,
        .axis line {
        fill: none;
        stroke: #fff;
        shape-rendering: crispEdges;
        }
    
        .axis text {
        font-family: 'Microsoft YaHei';
        font-size: 12px;
        fill:#fff;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script>
     // 数据点
     var dataset = [
      [0, 0], [65.66, 420], [540, 260], [360, 320], [200, 200],
      [130, 623], [652, 52], [333, 666], [729, 656], [134, 352],
      [120, 56], [905, 177], [777, 888], [550, 680]
    ];
    let width=800
    let height=400
    let padding=60

    //创建画布
    let svg=d3.select("#container")
    .append("svg")
    .attr("width",width)
    .attr("height",height)
    
    //添加标题
    svg.append("text")
    .attr("x",width/2-120)
    .attr("y",30)
    .attr("class","title")
    .text("d3散点图")

    //x轴标尺
    let xScale=d3.scaleLinear()
    .domain([0,d3.max(dataset,(d)=>d[0])])
    .range([padding,width-padding*2])

     //y轴标尺
    let yScale=d3.scaleLinear()
    .domain([0,d3.max(dataset,(d)=>d[1])])
    .range([height-padding,padding])

     //原点的标尺
    var rScale = d3.scaleLinear()
      .domain([0, d3.max(dataset, function(d) {
        return d[1];
      })]).range([2, 4]);

      //画出各个点点并添加到画布中
      svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx",(d)=>{
          return xScale(d[0])
      })
      .attr("cy",(d)=>{
          return yScale(d[1])
      })
      .attr("r",(d)=>{
          return rScale(d[1])
      })
      .attr("fill","red")

     
       //x坐标轴
      let xAxis=d3.axisBottom()
      .scale(xScale)
      .ticks(7)

      //y坐标轴
      let yAxis=d3.axisLeft()
      .scale(yScale)
      .ticks(7)

      //把坐标轴添加到画布中
      svg.append("g")
      .attr("class","axis")
      .attr("transform","translate(0,"+(height-padding)+")")
      .call(xAxis)
      svg.append("g")
      .attr("class","axis")
      .attr("transform","translate("+padding+",0)")
      .call(yAxis)
</script>