D3line()設定d屬性回傳NaN

我很迷失在這一點上。我已經洗掉了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...

uj5u.com熱心網友回復：

問題實際上是x屬性的值：由于您使用的是時間刻度，因此您需要日期物件。你timeParse不應該被洗掉。

但是，它沒有做任何事情，因為d3.json它不接受行函式（這對 JSON 毫無意義）。因此，一個簡單的替代方法是在 a 中創建日期物件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>

標籤：

上一篇：X軸和Y軸不在一起

下一篇：如何在d3js中選擇特定時間段？