d3 坐标轴实现-散点图

用d3实现的一个很简略的坐标轴，可参考官方API
效果例图：
PS：注意设置css时只能使用svg认识的属性，可参考
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>D3-coordinate-test</title>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style>
    .cocoordinate-div {
      margin: 100px 500px 100px;
      border: 2px solid blue;
    }

    .title {
      font-size: 26px;
      font-family: 'Microsoft YaHei';
      fill: red;
    }

    /*svg属性可参考*/
    /*https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute*/

    .axis path,
    .axis line {
      fill: none;
      stroke: black;
      shape-rendering: crispEdges;
    }

    .axis text {
      font-family: 'Microsoft YaHei';
      font-size: 12px;
    }

  </style>
</head>
<body>
  <div id="coordinate" class="cocoordinate-div">
    
  </div>
  <script>

    // svg 的大小
    var svgWidth = 800;
    var svgHight = 400;
    var padding =  60;

    // 数据点
    var dataset = [
      [0, 0], [65.66, 420], [520, 260], [360, 320], [200, 200],
      [130, 623], [652, 52], [333, 666], [729, 656], [134, 352],
      [120, 56], [905, 177], [777, 888], [1200, 1000]
    ];

    // 创建SVG
    var svg = d3.select('#coordinate')
      .append('svg')
        .attr('width', svgWidth)
        .attr('height', svgHight);

    // 设置标题
    svg.append('text')
      .attr('x', svgWidth / 2 - 120)
      .attr('y', 30)
      .attr('class', 'title')
      .text('这是一个用d3画的简略坐标轴');

    // 创建比例尺
    var xScale = d3.scale.linear()
      .domain([0, d3.max(dataset, function(d) {
        return d[0];
      })]).range([padding, svgWidth - padding * 2]);

    var yScale = d3.scale.linear()
      .domain([0, d3.max(dataset, function(d) {
        return d[1];
      })]).range([svgHight - padding, padding]);

    var rScale = d3.scale.linear()
      .domain([0, d3.max(dataset, function(d) {
        return d[1];
      })]).range([2, 4]);

    // 设置散点的坐标, 半径
    svg.selectAll('circle')
        .data(dataset)
      .enter()
      .append('circle')
        .attr('cx', function(d) {
          return xScale(d[0]);
        })
        .attr('cy', function(d) {
          return yScale(d[1]);
        })
        .attr('r', function(d) {
          return rScale(d[1]);
        });

    // 设置文本
    svg.selectAll('text')
        .data(dataset)
      .enter()
      .append('text')
        .text(function(d) {
          return '(' + d[0] + ', ' + d[1] + ')';
        })
        .attr('x', function(d) {

          // 设置偏移量，让文本位于上方
          return xScale(d[0]) - 20;
        })
        .attr('y', function(d) {
          return yScale(d[1]) - 10;
        })
        .attr('font-family', 'Microsoft YaHei')
        .attr('font-size', '12px')
        .attr('fill', '#9400D3');

    // 设置精度和样式
    var formatPrecision = d3.format('$');

    // 定义X轴
    var xAxis = d3.svg.axis()
      .scale(xScale)

      // 粗略的设置刻度线的数量，包括原点
      .ticks(7)
      .orient('bottom')

      // 设置刻度格式
      .tickFormat(formatPrecision);

    // 定义Y轴
    var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient('left')
      .ticks(7)
      .tickFormat(formatPrecision);

    // 创建X轴, svg中： g元素是一个分组元素
    svg.append('g')
      .attr('class', 'axis')

      // 设置据下边界的距离
      .attr('transform', 'translate(0, ' + (svgHight - padding) + ')')
      .call(xAxis);

    // 创建Y轴
    svg.append('g')
      .attr('class', 'axis')

      // Y轴离左边界的距离
      .attr('transform', 'translate(' + padding + ', 0)')
      .call(yAxis);

  </script>
</body>
</html>
d3 坐标轴实现-散点图

猜你喜欢
