Question

我正在尝试创建多条折线图（仅两条线），但无法显示两条线的路径。如果我有一行，则有任何问题，但如果添加第二行，则不起作用。这是我的代码：

function line({title, xAxis, yAxis, data, source, place}) {

  const {window} = new JSDOM('<!DOCTYPE html>');

  window.d3 = d3.select(window.document);

  const margin = {top: 50, right: 20, bottom: 200, left: 70};
  const width = 600 - margin.left - margin.right;
  const height = 500 - margin.top - margin.bottom;

  const heading = `${title} ${place}`;

  const x = d3.scaleTime().range([0, width]);
  const y = d3.scaleLinear().range([height, 0]);

  const valueLine = d3.line()
    .x((d) => x(d.key))
    .y((d) => y(d.value));

  const valueLineEngland = d3.line()
      .x((d) => x(d.key))
      .y((d) => y(d.valueEngland));

  window.d3.select('body')
    .attr('width', width)
    .attr('height', height + 50)
    .append('svg')
    .attr('class', 'radar-graphic')
    .attr('xmlns', 'http://www.w3.org/2000/svg')
    .attr('width',  width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('style').text(css);

  const svg = window.d3.select('svg').append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  const parseTime = d3.timeParse('%d-%b-%y');

  data.forEach((d) => d.key = parseTime(d.key));

  x.domain(d3.extent(data, (d) => d.key));
  y.domain([0, d3.max(data, (d) => d.value) + d3.max(data, (d) => d.value)*0.15]);
  // y.domain([0, d3.max(data, function(d) {
    //   return Math.max(d.value, d.valueEngland); })]);

  // add the Y gridlines
  svg.append("g")
      .attr("class", "grid")
      .call(make_y_gridlines()
          .tickSize(-width)
          .tickFormat("")
          .ticks(5)
      )

  // Add the valueline path.
  svg.append('path')
    .data([data])
    .attr('class', 'line')
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 2)
    .attr('d', valueLine);

  svg.append('path')
      .data([data])
      .attr('class', 'lineEngland')
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 2)
      .attr('d', valueLineEngland);


    // line labels

  svg.append('g')
  .classed('labels-group', true)
  .selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .filter(function(d, i) { return i === (data.length - 1) })
  .classed('label',true)
  .attr("x", function (d) {
      return x(d.key) - 20;
  })
  .attr("y", function (d) {
      return y(d.value) - 8;
  })
  .style('font-family', 'Lato, Arial')
  .style('fill', 'black')
  .style('font-size', '14px')
  .text(function (d) {
      return d.value;
  });

  svg.append('g')
  .classed('labels-group', true)
  .selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .filter(function(d, i) { return i === (data.length - 1) })
  .classed('label',true)
  .attr("x", function (d) {
      return x(d.key) - 20;
  })
  .attr("y", function (d) {
      return y(d.valueEngland) - 8;
  })
  .style('font-family', 'Lato, Arial')
  .style('fill', 'black')
  .style('font-size', '14px')
  .text(function (d) {
      return d.valueEngland;
  });



// Add the scatterplot
   svg.selectAll("dot")
       .data(data)
    .enter().append("circle")
    .filter(function(d, i) { return i === (data.length - 1) })
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.key); })
      .attr("cy", function(d) { return y(d.value); })
      .style('fill', 'steelblue');

  svg.selectAll("dotEngland")
          .data(data)
       .enter().append("circle")
       .filter(function(d, i) { return i === (data.length - 1) })
         .attr("r", 3.5)
         .attr("cx", function(d) { return x(d.key); })
         .attr("cy", function(d) { return y(d.valueEngland); })
         .style('fill', 'red');

  //  title
  svg.append('text')
    .attr('x', (margin.left))
    .attr('y', 0 - (margin.top / 2))
    .attr('text-anchor', 'middle')
    .style('font-size', '20px')
    .style('font-weight', 'bold')
    .style('font-family', 'Lato, Arial')
    .style('fill', 'black')
    .text(heading);

  //  x axis
  svg.append('g')
    .attr('transform', 'translate(0,' + height + ')')
    .call(d3.axisBottom(x).ticks(5))
    .selectAll('text')
    .style('text-anchor', 'end')
    .attr('dx', '1.2em')
    .attr('dy', '1.1em')
    .attr('transform', 'rotate(0)');

function make_y_gridlines() {
    return d3.axisLeft(y)
  }

  // y axis
  svg.append('g')
  .attr("class", "axisSteelblue")
  .attr("class", "y axis")
    .call(d3.axisLeft(y).ticks(5));


  svg.append('text')
    .attr('transform', 'rotate(-90)')
    .attr('y', -65)
    .attr('x', 0 - (height / 6))
    .attr('dy', '1em')
    .attr("fill", "steelblue")
    .style('font-size', '11px')
    .style('color', 'steelblue')
    .style('text-anchor', 'middle')
    .style('font-style', 'italics')
    .style('font-family', 'Lato, Arial')
    .text(yAxis);

  svg.append('text')
      .attr('transform',
          'translate(' + (-19) + ' ,' +
        (height + margin.top + 20) + ')')
      .style('text-anchor', 'middle')
      .style('font-size', '10px')
      .style('font-family', 'Lato, Arial')
      .text("Source:");

  svg.append('text')
    .attr('transform',
      'translate(' + (59) + ' ,' +
      (height + margin.top + 20) + ')')
    .style('text-anchor', 'middle')
    .style('font-size', '10px')
    .style('font-family', 'Lato, Arial')
    .text(source);


    return [window.d3.select('body').html(), null];

};

似乎无法正确获取坐标，因为我在该行的某些点得到了NaN结果。

希望您能帮助我了解这里的情况。

D3多个折线图不显示折线

0 个答案: