Как исправить проблему с отображением в многострочном графике. Svg.append ("путь") ничего не отображает - PullRequest
Новая
       12

Как исправить проблему с отображением в многострочном графике. Svg.append ("путь") ничего не отображает

2 голосов
/ 01 апреля 2019

Я пытаюсь создать многострочный график для моего углового веб-приложения, чтобы визуализировать некоторые данные, которые будут добавлять линии в соответствии с элементами в переменной данных. Поскольку я пытаюсь добавить строку пути в элемент svg, мне не удается ее отобразить. Сейчас только две оси отображаются правильно. 

    var margin = {
        top: 20,
        right: 80,
        bottom: 30,
        left: 50
      },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var x = d3.scaleTime().domain([new Date(2000, 0, 0), new Date(2017, 0, 0)]).range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

    var svg = d3.select(this.htmlElement).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 + ")");


    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y")).ticks(d3.timeYear, 1));

    // Add the Y Axis 
    svg.append("g")
      .call(d3.axisLeft(y))
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");

    // define the line
    var line = d3.line()
      .x(function(d) {
        return d.name;
      })
      .y(function(d) {
        return d.value;
      });

    data.forEach(function(d) {
      svg.append("path")
        .attr("class", "line")
        .attr('d', line(d.series))
        .attr('stroke', 'blue')
        .attr('stroke-width', 2)
        .attr('fill', 'none');
    });

структура данных 

var data = [{
      "key": "Germany",
      "series": [
        {
          "a": "Germany",
          "name": "2010",
          "value": 0.2
        },
        {
          "a": "Germany",
          "name": "2011",
          "value": 0.5
        }
      ]
    }, {
      "key": "uk",
      "series": [
        {
          "a":"uk",
          "name": "2010",
          "value": 0.3
        },
        {
          "a":"uk",
          "name": "2011",
          "value": 0.6
        }
      ]
    }];

Полагаю, проблема в цикле data.foreach, но мне не удается его найти.

1 Ответ

0 голосов
/ 01 апреля 2019

согласно комментариям выше рабочий код можно увидеть ниже 

      var margin = {
        top: 20,
        right: 80,
        bottom: 30,
        left: 50
      },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var x = d3.scaleTime().domain([new Date(2000, 0, 0), new Date(2017, 0, 0)]).range([0, width]);
    var y = d3.scaleLinear().domain([0,1]).range([height, 0]);

    var svg = d3.select(this.htmlElement).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 + ")");


    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y")).ticks(d3.timeYear, 1));

    // Add the Y Axis 
    svg.append("g")
      .call(d3.axisLeft(y))
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");

    // define the line
    var line = d3.line()
      .x(function(d) { 
        return x(new Date(d.name, 0)); 
      })
      .y(function(d) {
        return y(d.value);
      });

    data.forEach(function(d) {
      svg.append("path")
        .attr("class", "line")
        .attr('d', line(d.series))
        .attr('stroke', 'blue')
        .attr('stroke-width', 2)
        .attr('fill', 'none');
    });
...