Особую разновидность линейных диаграмм представляют диаграммы с областями (area chart). Для их построения используется метод d3.svg.area():
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://d3js.org/d3.v3.min.js"> </script> <style> .axis path, .axis line { fill: none; stroke: #333; } .axis .grid-line { stroke: #000; stroke-opacity: 0.2; } .axis text { font: 10px Verdana; } </style> <body> <script type="text/javascript"> var height = 500, width = 500, margin=30, rawData = [{x: 0, y: 55}, {x: 10, y: 67}, {x: 20, y: 74},{x: 30, y: 63}, {x: 40, y: 56}, {x: 50, y: 24}, {x: 60, y: 26}, {x: 70, y: 19}, {x: 80, y: 42}, {x: 90, y: 88}, {x: 100, y: 80} ], data=[]; var svg = d3.select("body").append("svg") .attr("class", "axis") .attr("width", width) .attr("height", height); // длина оси X= ширина контейнера svg - отступ слева и справа var xAxisLength = width - 2 * margin; // длина оси Y = высота контейнера svg - отступ сверху и снизу var yAxisLength = height - 2 * margin; // функция интерполяции значений на ось Х var scaleX = d3.scale.linear() .domain([0, 100]) .range([0, xAxisLength]); // функция интерполяции значений на ось Y var scaleY = d3.scale.linear() .domain([100, 0]) .range([0, yAxisLength]); for(i=0; i<rawData.length; i++) data.push({x: scaleX(rawData[i].x)+margin, y: scaleY(rawData[i].y) + margin}); // создаем ось X var xAxis = d3.svg.axis() .scale(scaleX) .orient("bottom"); // создаем ось Y var yAxis = d3.svg.axis() .scale(scaleY) .orient("left"); // отрисовка оси Х svg.append("g") .attr("class", "x-axis") .attr("transform", "translate(" + margin + "," + (height - margin) + ")") .call(xAxis); // отрисовка оси Y svg.append("g") .attr("class", "y-axis") .attr("transform", "translate(" + margin + "," + margin + ")") .call(yAxis); // создаем набор вертикальных линий для сетки d3.selectAll("g.x-axis g.tick") .append("line") .classed("grid-line", true) .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", - (height - 2 * margin)); // рисуем горизонтальные линии d3.selectAll("g.y-axis g.tick") .append("line") .classed("grid-line", true) .attr("x1", 0) .attr("y1", 0) .attr("x2", xAxisLength) .attr("y2", 0); // функция, создающая по массиву точек линии var line = d3.svg.line() .x(function(d){return d.x;}) .y(function(d){return d.y;}); // функция, создающая область var area = d3.svg.area() .x(function(d) { return d.x; }) .y0(height - margin) .y1(function(d) { return d.y; }); var g = svg.append("g"); g.append("path") .attr("d", area(data)) .style("fill", "lightblue"); g.append("path") .attr("d", line(data)) .style("stroke", "steelblue") .style("stroke-width", 2); </script> </body> </html>
Здесь фактически также создается линейный график, только теперь все пространство между ним и осями закрашивается, образуя область. Для создания области применяется
метод d3.svg.area()
:
var area = d3.svg.area() .x(function(d) { return d.x; }) .y0(height - margin) .y1(function(d) { return d.y; });
Метод x()
возвращает х-координату, y1()
- y-координату, а метод y0()
устанавливает константу,
которая указывает на нижнюю границу области - ось X. Для получения y-координаты оси Х нам достаточно вычесть из высоты контейнера svg вычесть отступ снизу, либо
к высоте графика прибавить отступ сверху.
И также, как и с линиями, создаем по объектам area новый путь:
g.append("path") .attr("d", area(data)) .style("fill", "lightblue");