html svg 折线图原理,svg/d3.js折线图展示数据

初次接触d3.js，能感觉到它的强大，想要完全搞懂还是要花一番功夫，最近用它画了个折线图作为入门，以后还要多学习，请大家指教。

这个例子是在网上找到的，然后自己看懂这些代码的意思，小调整了一下，作为笔记出现，方便下次参考。

首先看一下效果图：

image.png

以下为源代码：

d3折线图

body {

font: 10px sans-serif;

margin: 50px;

}

.grid .tick {

stroke: lightgrey;

opacity: 0.7;

shape-rendering: crispEdges;

}

.grid path {

stroke-width: 0;

}

.axis path {

fill: none;

stroke: #bbb;

shape-rendering: crispEdges;

}

.axis text {

fill: #555;

}

.axis line {

stroke: #e7e7e7;

shape-rendering: crispEdges;

}

.axis .axis-label {

font-size: 14px;

}

.line {

fill: none;

stroke-width: 1.5px;

}

.dot {

/* consider the stroke-with the mouse detect radius? */

stroke: transparent;

stroke-width: 10px;

cursor: pointer;

}

.dot:hover {

stroke: rgba(68, 127, 255, 0.3);

}

var data = [

[{'x':1,'y':0},{'x':2,'y':5},{'x':3,'y':10},{'x':4,'y':0},{'x':5,'y':6},{'x':6,'y':11},{'x':7,'y':9},{'x':8,'y':4},{'x':9,'y':11},{'x':10,'y':2}],

[{'x':1,'y':1},{'x':2,'y':6},{'x':3,'y':11},{'x':4,'y':1},{'x':5,'y':7},{'x':6,'y':12},{'x':7,'y':8},{'x':8,'y':3},{'x':9,'y':13},{'x':10,'y':3}],

[{'x':1,'y':2},{'x':2,'y':7},{'x':3,'y':12},{'x':4,'y':2},{'x':5,'y':8},{'x':6,'y':13},{'x':7,'y':7},{'x':8,'y':2},{'x':9,'y':4},{'x':10,'y':7}],

[{'x':1,'y':3},{'x':2,'y':8},{'x':3,'y':13},{'x':4,'y':3},{'x':5,'y':9},{'x':6,'y':14},{'x':7,'y':6},{'x':8,'y':1},{'x':9,'y':7},{'x':10,'y':9}],

[{'x':1,'y':4},{'x':2,'y':9},{'x':3,'y':14},{'x':4,'y':4},{'x':5,'y':10},{'x':6,'y':15},{'x':7,'y':5},{'x':8,'y':0},{'x':9,'y':8},{'x':10,'y':5}]

];

var colors = [

'steelblue',

'green',

'red',

'purple'

];

var margin = {top: 20, right: 30, bottom: 30, left: 50},

width = 960 - margin.left - margin.right,

height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()

.domain([0, 12])

.range([0, width]);

var y = d3.scale.linear()

.domain([-1, 16])

.range([height, 0]);

//x轴设置

var xAxis = d3.svg.axis()

.scale(x)

.ticks(10)//调节刻度大小

.tickSize(-height)

.tickPadding(10)

.tickSubdivide(true)

.orient("bottom");

//y轴设置

var yAxis = d3.svg.axis()

.scale(y)

.tickPadding(10)

.tickSize(-width)

.tickSubdivide(true)

.orient("left");

//缩放拖拽

var zoom = d3.behavior.zoom()

.x(x)

.y(y)

.scaleExtent([-10, 10])//可缩放的范围

.on("zoom", zoomed);

var svg = d3.select("#trendSvg").append("svg")

.call(zoom)

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(xAxis);

svg.append("g")

.attr("class", "y axis")

.call(yAxis);

svg.append("g")

.attr("class", "y axis")

.append("text")

.attr("class", "axis-label")

.attr("transform", "rotate(-90)")

.attr("y", (-margin.left) + 10)

.attr("x", -height/2)

.text('Axis Label');

svg.append("clipPath")

.attr("id", "clip")

.append("rect")

.attr("width", width)

.attr("height", height);

var line = d3.svg.line()

.interpolate("linear")

.x(function(d) { return x(d.x); })

.y(function(d) { return y(d.y); });

svg.selectAll('.line')

.data(data)

.enter()

.append("path")

.attr("class", "line")

.attr("clip-path", "url(#clip)")

.attr('stroke', function(d,i){

return colors[i%colors.length];

})

.attr("d", line);

var points = svg.selectAll('.dots')

.data(data)

.enter()

.append("g")

.attr("class", "dots")

.attr("clip-path", "url(#clip)");

points.selectAll('.dot')

.data(function(d, index){

var a = [];

d.forEach(function(point,i){

a.push({'index': index, 'point': point});

});

return a;

})

.enter()

.append('circle')

.attr('class','dot')

.attr("r", 2)

.attr('fill', function(d,i){

return colors[d.index%colors.length];

})

.attr("transform", function(d) {

return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }

);

function zoomed() {

svg.select(".x.axis").call(xAxis);

svg.select(".y.axis").call(yAxis);

svg.selectAll('path.line').attr('d', line);

points.selectAll('circle').attr("transform", function(d) {

return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }

);

}