d3 坐标轴实现-散点图
2017-03-10 16:31
381 查看
用d3实现的一个很简略的坐标轴,可参考官方API
V3: API
中文手册
V4: D3.js 4.x 中文手册
效果例图:
![](https://img-blog.csdn.net/20170316163428765?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjg2MDA2Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
PS:注意设置css时只能使用svg认识的属性,可 参考
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
代码如下:
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>
相关文章推荐
- D3.js实现随机散点图(附带横纵坐标轴)
- gid+实现多种统计图 ,支持负坐标
- 坐标曲线的编程实现
- 如何实现从wgs-84到beijing54的坐标转换
- 坐标曲线的编程实现
- 10_1:物体按某一特定坐标实现旋转
- 使用OpenGL实现三维坐标的鼠标拣选(转)
- 如何实现经度纬度到平面坐标的相互转换?
- 如何实现从wgs-84到beijing54的坐标转换【转】
- 以一个图片为背景图,并且这上面画坐标的实现方式
- (JS实现)MapBar中坐标的加密和解密的脚本
- DAO类+通用持久类+通用动态formBean类,实现数据增、删、改、查newxy(新坐标)技术运用之三
- 坐标变换的实现
- 如何实现经度纬度到平面坐标的相互转换? 仅仅4句代码就可以解决!
- 在Google Maps API中实现container层坐标和地理坐标之间的转化
- MapBar中坐标的加密和解密(JS实现)
- 使用OpenGL实现三维坐标的鼠标拣选
- 摄像机标定算法中的很多处理,都有道理。比如内参数矩阵的定义。实现了单位的归一化,使世界坐标的实际值不重要,单位也不重要,只是单位为1的方格。
- 如何实现经度纬度到平面坐标的相互转换(VB.net)