d3 坐标轴实现-散点图

来源：互联网发布：虚拟机 linux nat 编辑：程序博客网时间：2024/05/29 23:44

用d3实现的一个很简略的坐标轴，可参考官方API

V3: API 中文手册

V4: D3.js 4.x 中文手册

效果例图：

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>

1 0