用HTML4坐标d,d3 坐标轴实现-散点图

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

PS：注意设置css时只能使用svg认识的属性，可 参考

代码如下：

D3-coordinate-test

.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;

}

// 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);