D3 - 从.json 读取并尝试 plot 点 - 没有显示

Question

I've been following various tutorials from over the past few years (seems D3 has gone through a bunch of changes) but cannot seem to nail this basic task down.在过去的几年里，我一直在关注各种教程（似乎 D3 经历了很多变化），但似乎无法确定这个基本任务。 Loading data in from MonthySales.json and trying to plot the points.从 MonthySales.json 加载数据并尝试 plot 点。 Blank screen, but no errors at all in console.空白屏幕，但控制台中根本没有错误。

    var h=100;
    var w=400;
    
    d3.json("MonthlySales.json", function(error, data) { 

        var dataset = data
    
        var line = d3.line()
        .x(function (d) {return ((d.month-20130001)/3.25)})
        .y(function (d) {return h-d.sales; })
    
        var svg = d3.select("body").append("svg").attr("width",w).attr("height",h)
    
        svg.append("path").datum(dataset).attr("class","line").attr("d",line)
           .attr("fill","none").attr("stroke","purple").attr("stroke-width","2")

        });

JSON is set up in the form: JSON 设置为：

[
{"month":20130101, "sales":38},
{"month":20130201, "sales":35},
{"month":20130301, "sales":24},
{"month":20130401, "sales":21},
{"month":20130501, "sales":34},
{"month":20130601, "sales":45},
{"month":20130701, "sales":67},
{"month":20130801, "sales":1},
{"month":20130901, "sales":54},
{"month":20131001, "sales":10},
{"month":20131101, "sales":20},
{"month":20131201, "sales":30}
]

Answer 1

On V5/v6 d3.json() is a wrapper of JS fetch , and fetch is a promise.在 V5/v6上，d3.json()是JS fetch的包装，而fetch是 promise。

function responseJson(response) {
  if (!response.ok) throw new Error(response.status + " " + response.statusText);
  if (response.status === 204 || response.status === 205) return;
  return response.json();
}

export default function(input, init) {
  return fetch(input, init).then(responseJson);
}

input argument remains a the route to the JSON, but init is the options object of fetch()输入参数仍然是 JSON 的路由，但init是fetch()的选项 object

{
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  }

responseJson() process the response of the promise and pass a JSON Object to the next then() responseJson()处理 promise 的响应并将 JSON Object 传递给下一个then()

Now the correct way to do this is现在正确的方法是

 const h = 100; const w = 400; d3.json("https://gist.githubusercontent.com/jkutianski/57d1d392068b6c5a9216466f9e5d6459/raw/f93d5c296c3b6b69c920c573e010a29cc4339f2a/MonthlySales.json").then(dataset => { const line = d3.line().x(d => (d.month - 20130001) / 3.25).y(d => h - d.sales); const svg = d3.select("body").append("svg").attr("width", w).attr("height", h); svg.append("path").datum(dataset).attr("class", "line").attr("d", line).attr("fill", "none").attr("stroke", "purple").attr("stroke-width", "2"); }).catch(console.error);

 <script src="https://d3js.org/d3.v6.min.js"></script> <!DOCTYPE html> <html> <meta charset="utf-8"> <body> </body> </html>

D3 - 从.json 读取并尝试 plot 点 - 没有显示

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-01-27 03:51:14

D3 - 从.json 读取并尝试 plot 点 - 没有显示

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-01-27 03:51:14

解决方案1
1 已采纳 2021-01-27 03:51:14