从CSV渲染D3数据

Question

从CSV渲染D3数据

3

这更像是一个代码审查请求，但是我无论如何都无法将此

 .csv 数据正确呈现为D3中的线图...
以下是我编写的代码。
到目前为止，我只能渲染y轴和轴标题，但似乎无法呈现数据。也许我做错了什么，但是我简单地没有看到它。
非常感谢您的帮助和建议。

JavaScript文件

// ./weather-app/d3/testing-dsky-d3.js
const fname_forecast =  'forecast-hourly-temp.csv';
const path2File = './csv/';

const parseDateTime = d3.timeParse('%Y-%m-%d %H:%M:%S');

d3.csv(path2File + fname_forecast)
  .row((data) => {
    return {
      date: parseDateTime(data.datetime),
      temp: +data.temperature
    }
  })
  .get((err, data) => {
    if (err) {
      console.log('\nErrors!\n', err)
    } else {
      console.log(data);

      const minDate = d3.min(data, (d) => { return d.date; });
      const maxDate = d3.max(data, (d) => { return d.date; });

      const minTemp = d3.min(data, (d) => { return d.temp; });
      const maxTemp = d3.max(data, (d) => { return d.temp; });

      const svg = d3.select('svg'),
            margin = { top: 20, right: 20, bottom: 30, left: 50 },
            width = +svg.attr('width') - margin.left - margin.right,
            height = +svg.attr('height') - margin.top - margin.bottom,
            g = svg.append('g')
                      .attr('transform', 'translate(' + margin.left +   ',' + margin.top + ')');

      const x = d3.scaleTime()
                  .rangeRound([minDate, maxDate])
                  .domain([minDate, maxDate]);
      const y = d3.scaleLinear()
                  .rangeRound([height, 0])
                  .domain([height, 0])

      const line = d3.line()
                     .x((d) => { return x(d.date); })
                     .y((d) => { return y(d.temp); });

      g.append('g')
          .attr('transform', 'translate(0,' + height + ')')
          .call(d3.axisBottom(x))
        .select('.domain')
          .remove();

      g.append('g')
          .call(d3.axisLeft(y))
        .append('text')
          .attr('fill', '#000')
          .attr('transform', 'rotate(-90)')
          .attr('y', 6)
          .attr('dy', '0.71em')
          .attr('text-anchor', 'end')
          .text('Temperature (degC)');

      g.append('path')
          .datum(data)
          .attr('fill', 'none')
          .attr('stroke', 'steelblue')
          .attr('stroke-linejoin', 'round')
          .attr('stroke-linecap', 'round')
          .attr('stroke-width', 1.5)
          .attr('d', line);

       }
     });


HTML文件：

<!DOCTYPE html>
<html>


<head>
  <meta charset='utf-8'>
  <title>Test: Rendering DarkSky Data w/ D3</title>
  <script type='text/javascript' src='./learn/d3.v4.js'></script>
</head>

<body>

  <h1>Test: Rendering DarkSky API Temperature Data w/   <code>D3.js</code></h1>
  <hr><br>
  <div id='container'>
    <svg width='960' height='500'></svg>
  </div>
  <script type='text/javascript' src='testing-dsky-d3.js'></script>

</body>


以下是一些.csv文件的示例

datetime,temperature

2018-04-04 12:00:00,46.98

2018-04-04 13:00:00,48.43

2018-04-04 14:00:00,49.63

2018-04-04 15:00:00,49.85

2018-04-04 16:00:00,48.98

2018-04-04 17:00:00,47.95

2018-04-04 18:00:00,47.35

2018-04-04 19:00:00,47.08

2018-04-04 20:00:00,46.79

2018-04-04 21:00:00,46.62

- kdubss

你好，能否把这个改成fiddle格式？ - W4t3randWind

jsfiddle.net是否支持D3，并且我能否加载外部CSV文件？ - kdubss

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Reid · Accepted Answer

您需要正确设置比例尺的域和范围，

在这里：

 const x = d3.scaleTime()
    .rangeRound([minDate, maxDate])
    .domain([minDate, maxDate]);

您正在设置一个范围，将其从minDate到maxDate（域）的值映射到minDate到maxDate（范围）的值。您需要对此进行修改：

 const x = d3.scaleTime()
    .rangeRound([0,width])       // values to map to (x coordinate values)
    .domain([minDate, maxDate]); // extent of input values/values needing scaling

同样适用于您的y轴：

  const y = d3.scaleLinear()
              .rangeRound([height, 0])
              .domain([height, 0])

您需要区分您的范围和域。上面的比例尺仅接受0到height之间的值，并返回相同的值。

为了修复您的图表，您需要正确设置：

域（Domain）为数据集中输入值的范围（温度、日期等）
范围（Range）为输出值的范围，通常为x或y的坐标值（或颜色、半径等）。

应用这些更改（我硬编码了一个温度为[40,50]的域）如下：

  const x = d3.scaleTime()
              .rangeRound([0,width])
              .domain([minDate, maxDate]);
  const y = d3.scaleLinear()
              .domain([40, 50])
              .rangeRound([height, 0])

当我使用你的代码和数据时，我得到以下结果：