javascript - d3面积图未显示

Question

我正在尝试创建 d3 面积图，但没有显示任何内容。 我的猜测是 xScale 有问题。我可以看到一条路径被添加到 DOM，但是 d 属性不存在。我做错了什么？

// Area chart width and height
const width = 500,
  height = 100;

//Define x and y scale for area chart
const xScale = d3.scaleLinear().range([0, width]);
const yScale = d3.scaleLinear().range([height, 0]);

// Add SVG to #areachart
const svg = d3
  .select('#areachart')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

const g = svg.append('g');

// Fetch data
d3.json('https://data.london.gov.uk/api/table/s8c9t_j4fs2?$offset=7600')
  .then(function(data) {

    //Define xScale & yScale domain after data loaded
    yScale.domain([
      0,
      d3.max(data, function(d) {
        return +d.total_cases;
      }),
    ]);

    xScale.domain(
      d3.extent(data, function(d) {
        return +d.new_cases;
      })
    );
    // Area  generator
    const area = d3
      .area()
      .curve(d3.curveBasis)
      .x((d) => xScale1(+d.new_cases))
      .y0((d) => yScale1(d.y0))
      .y1((d) => yScale1(d.y0 + d.y));

    console.log('data:', data.rows);

    g.selectAll('g')
      .data(data)
      .enter()
      .append('g')
      .append('path')
      .classed('line', true)
      .attr('d', area)
      .style('fill', 'red');
  })
  // if there's an error, log it
  .catch((error) => console.log(error));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
<section id="map">
  <div id="visualisation-container">
    <div id="visualisation"></div>
    <div id="areachart"></div>
  </div>
</section>

Answer 1

您的主要问题是:

• 您使用了 d3.max(data，但 data 不是数组。我在之前的 .then( 中使用了 data.rows ，解决了这个问题；
• 您使用了selectAll，为每个数据点创建了一个路径。对于面积图，您实际上只需要一条路径，或者每个区域至少需要一条路径。我将其从 .data().enter() 更改为 .datum();
• 您使用了值 d.y0 和 d.y，这些值在数据对象上不存在；
• 您没有为该区域提供描边，仅提供填充。如果该区域没有填充，则不起作用。

我并不是说这更好，因为数据没有排序，但至少你现在看到了一些东西。

// Area chart width and height
const width = 500,
  height = 100;

//Define x and y scale for area chart
const xScale = d3.scaleLinear().range([0, width]);
const yScale = d3.scaleLinear().range([height, 0]);

// Add SVG to #areachart
const svg = d3
  .select('#areachart')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

const g = svg.append('g');

// Fetch data
d3.json('https://data.london.gov.uk/api/table/s8c9t_j4fs2?$offset=7600')
  .then(response => response.rows)
  .then(function(data) {

    //Define xScale & yScale domain after data loaded
    yScale.domain([
      0,
      d3.max(data, function(d) {
        return +d.total_cases;
      }),
    ]);

    xScale.domain(
      d3.extent(data, function(d) {
        return +d.new_cases;
      })
    );

    // Area  generator
    const area = d3
      .area()
      .curve(d3.curveBasis)
      .x((d) => xScale(+d.new_cases))
      .y((d) => yScale(+d.total_cases));

    g.append('g')
      .datum(data)
      .append('path')
      .classed('line', true)
      .attr('d', area)
      .style('stroke', 'red')
      .style('fill', 'red');
  })
  // if there's an error, log it
  .catch((error) => console.log(error));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
<section id="map">
  <div id="visualisation-container">
    <div id="visualisation"></div>
    <div id="areachart"></div>
  </div>
</section>