@MrTheGhost

Как отобразить 2 графика на одной странице с помощью d3.js?

Прошу, если кто знает - не поленитесь, напишите!
Второй день уже схожу с ума. В веб слабый, нужно расположить 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) })
        )

})


Буду премного благодарен за помощь!
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
@MrTheGhost Автор вопроса
Благодарю всех опытных программистов, которые так помогли! (нет).

Нашел решение сам. Если вдруг кто-то когда-то столкнется с такой же проблемой, вот решение:
У каждого графика должно быть своя переменная margin, width и height, которые мы создаем в начале скрипта.
Пример:
1 график:

let margin1 = {top: 10, right: 30, bottom: 30, left: 60},
width1 = 800 - margin.left - margin.right,
height1 = 400 - margin.top - margin.bottom;

2 график:

let margin2 = {top: 10, right: 30, bottom: 30, left: 60},
width2 = 800 - margin.left - margin.right,
height2 = 400 - margin.top - margin.bottom;


Спасибо всем (нет) за помощь, и удачи всем будущим разработчиками :)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы