D3 line() 设置 d 属性返回 NaN

Question

我对这个很迷茫。我已经删除了timeParse，这似乎并没有做任何事情？ （我在滥用它吗？）。 Y 正在正确缩放，因此似乎正在解析数据... X 但是返回空白...

我错过了什么？

-- JSON--

{"data":[{"id":1,"x":"2019-01-01","y":135328287},{"id":2,"x":"2019-01-02","y":100071098},{"id":3,"x":"2019-01-03","y":171434059},{"id":4,"x":"2019-01-04","y":110975168},{"id":5,"x":"2019-01-05","y":178786923},{"id":6,"x":"2019-01-06","y":174622991},{"id":7,"x":"2019-01-07","y":90238133},{"id":8,"x":"2019-01-08","y":94038403},{"id":9,"x":"2019-01-09","y":144493248},{"id":10,"x":"2019-01-10","y":154400885},{"id":11,"x":"2019-01-11","y":118925526},{"id":12,"x":"2019-01-12","y":97099311},{"id":13,"x":"2019-01-13","y":117296138},{"id":14,"x":"2019-01-14","y":108969313},{"id":15,"x":"2019-01-15","y":129457614},{"id":16,"x":"2019-01-16","y":133212354},{"id":17,"x":"2019-01-17","y":107365954},{"id":18,"x":"2019-01-18","y":98432579},{"id":19,"x":"2019-01-19","y":161141883}...

-- JS--

d3.json("http://localhost:4000/api/line/1",
    
    function (d) {      
      return { x: d3.timeParse("%Y-%m-%d")(d.data.x), y: d.data.y }
   }).then(

      function (data) {

        var dataset = data.data;        

        const x = d3.scaleTime()
          .domain(d3.extent(dataset, d=> d.x ))
          .range([0, width]);


        svg.append("g")
          .attr("transform", `translate(0, ${height})`)
          .call(d3.axisBottom(x));

        // Add Y axis
        const y = d3.scaleLinear()
          .domain([80000000, d3.max(dataset, d=> +d.y )])
          .range([height, 0]);


        svg.append("g")
          .call(d3.axisLeft(y));

        // Add the line
        svg.append("path")
          .datum(dataset)
          .attr("fill", "none")
          .attr("stroke", "steelblue")
          .attr("stroke-width", 1.5)
          .attr("d", d3.line()
            .x(d=> x(d.x) )
            .y(d=> y(d.y) )
          )

      })

line() 将 d attr 设置为：

MNaN,160.6996009996307LNaN,287.7010358232216 etc...

Answer 1

问题确实是x 属性的值：由于您使用的是时间刻度，因此您需要日期对象。不应删除您的 timeParse。

但是，它什么也没做，因为d3.json 不接受行函数（这对 JSON 来说意义不大）。因此，一个简单的替代方法是在 forEach 中创建日期对象：

dataset.forEach(d => d.x = timeParse(d.x))

这是您的带有日期对象的代码：

const data = {
  "data": [{
    "id": 1,
    "x": "2019-01-01",
    "y": 135328287
  }, {
    "id": 2,
    "x": "2019-01-02",
    "y": 100071098
  }, {
    "id": 3,
    "x": "2019-01-03",
    "y": 171434059
  }, {
    "id": 4,
    "x": "2019-01-04",
    "y": 110975168
  }, {
    "id": 5,
    "x": "2019-01-05",
    "y": 178786923
  }, {
    "id": 6,
    "x": "2019-01-06",
    "y": 174622991
  }, {
    "id": 7,
    "x": "2019-01-07",
    "y": 90238133
  }, {
    "id": 8,
    "x": "2019-01-08",
    "y": 94038403
  }, {
    "id": 9,
    "x": "2019-01-09",
    "y": 144493248
  }, {
    "id": 10,
    "x": "2019-01-10",
    "y": 154400885
  }, {
    "id": 11,
    "x": "2019-01-11",
    "y": 118925526
  }, {
    "id": 12,
    "x": "2019-01-12",
    "y": 97099311
  }, {
    "id": 13,
    "x": "2019-01-13",
    "y": 117296138
  }, {
    "id": 14,
    "x": "2019-01-14",
    "y": 108969313
  }, {
    "id": 15,
    "x": "2019-01-15",
    "y": 129457614
  }, {
    "id": 16,
    "x": "2019-01-16",
    "y": 133212354
  }, {
    "id": 17,
    "x": "2019-01-17",
    "y": 107365954
  }, {
    "id": 18,
    "x": "2019-01-18",
    "y": 98432579
  }, {
    "id": 19,
    "x": "2019-01-19",
    "y": 161141883
  }]
};

const svg = d3.select("svg");
const width = 400,
  height = 150;

const timeParse = d3.timeParse("%Y-%m-%d");

var dataset = data.data;

dataset.forEach(d => d.x = timeParse(d.x))

const x = d3.scaleTime()
  .domain(d3.extent(dataset, d => d.x))
  .range([70, width]);

svg.append("g")
  .attr("transform", `translate(0, ${height - 20})`)
  .call(d3.axisBottom(x));

// Add Y axis
const y = d3.scaleLinear()
  .domain([80000000, d3.max(dataset, d => +d.y)])
  .range([height - 20, 0]);


svg.append("g")
  .attr("transform", `translate(70,0)`)
  .call(d3.axisLeft(y));

// Add the line
svg.append("path")
  .datum(dataset)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 1.5)
  .attr("d", d3.line()
    .x(d => x(d.x))
    .y(d => y(d.y))
  );

<script src="https://d3js.org/d3.v7.min.js"></script>
<svg width="400"></svg>