Прошу, если кто знает - не поленитесь, напишите!
Второй день уже схожу с ума. В веб слабый, нужно расположить 2 графика на одной странице. В интернете нашел код, с отображением одного графика, подправил "под себя". Но 2 графика одновременно отобразить не получается.
Прикрепляю код:
Страница:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<h2>График курса доллара</h2>
<div id="dollarChart"></div>
<script src="script/dollarGraph.js"> </script>
<div id="euroChart"><br></div>
<script src="script/euroGraph.js"> </script>
</body>
</html>
Первый график:
let margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
let svg = d3.select("#dollarChart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
d3.csv("dollar.txt",
function(d){
return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
},
function(data) {
//Фильтрация данных только за последний год
let dateCurrent = Date.now()
data = data.filter(function(d){return d.date >= dateCurrent - (365 * 24 * 3600 * 1000)})
// Ось Х
let now = new Date();
let x = d3.scaleTime()
.domain([now - (365 * 24 * 3600 * 1000), d3.max(data, function(d) { return d.date; })])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Ось У
let y = d3.scaleLinear()
.domain([d3.min(data, function(d) { return +d.value; })-2, d3.max(data, function(d) { return +d.value; })])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.date) })
.y(function(d) { return y(d.value) })
)
})
Второй график:
let margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
let svg2 = d3.select("#euroChart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
d3.csv("euro.txt",
function(d){
return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
},
function(data) {
//Фильтрация данных только за последний год
let dateCurrent = Date.now()
data = data.filter(function(d){return d.date >= dateCurrent - (365 * 24 * 3600 * 1000)})
// Ось Х
let now = new Date();
let x = d3.scaleTime()
.domain([now - (365 * 24 * 3600 * 1000), d3.max(data, function(d) { return d.date; })])
.range([ 0, width ]);
svg2.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Ось У
let y = d3.scaleLinear()
.domain([d3.min(data, function(d) { return +d.value; })-2, d3.max(data, function(d) { return +d.value; })])
.range([ height, 0 ]);
svg2.append("g")
.call(d3.axisLeft(y));
svg2.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.date) })
.y(function(d) { return y(d.value) })
)
})
Буду премного благодарен за помощь!
Простой
