如何从 JSON 生成矩形？

Question

我正在做一个学习 d3 可视化的项目我的堆栈记录没有出现。你能帮帮我吗？

我尝试为数据放置一个简单的数组并且它起作用了，我只能翻转 y，但有了这个 JSON 数据。没有效果

https://codepen.io/DeanWinchester88/pen/XWgjjeW

let dataSet;
let data;
function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}
//usage: 
readTextFile("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json", function(text){
    data = JSON.parse(text);
      dataSet = data["data"]
    console.log(dataSet);
});

const w = 700;
const h = 500;

const svg = d3.select("body")
  .append("svg")
  .attr("width",w)
  .attr("heigth",h)
  .attr("style", "outline: thin solid red;");

svg.selectAll("rect")
  .data(dataSet)
  .enter()
       .append("rect")
       .attr("x", (d,i) => d[1][i]+ 10)
       .attr("y", (d, i) => 0 )
       .attr("width", 25)
       .attr("height", (d, i) => d[1] /2 )
       .attr("fill", "navy")
       .attr("class", "bar")
       .append("title")
       .text((d) => d)

  svg.selectAll("text")
       .data(dataSet)
       .enter()
       .append("text")
       .text((d) => d)
       .attr("x", (d, i) => i * 30 +10)
       .attr("y", (d, i) => 15)

Answer 1

问题是 XMLHttpRequest 是异步的，您在传递给 readTextFile 的回调之外定义 d3 逻辑。最简单的解决方案是在回调中包含 d3 逻辑：

readTextFile("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json", function(text){
    data = JSON.parse(text);
      dataSet = data["data"]
    console.log(dataSet);
    // Add d3 logic here
    const w = 700;
const h = 500;

const svg = d3.select("body")
  .append("svg")
  .attr("width",w)
  .attr("heigth",h)
  .attr("style", "outline: thin solid red;");

svg.selectAll("rect")
  .data(dataSet)
  .enter()
       .append("rect")
        // Changed this line to remove the [i]
       .attr("x", (d,i) => d[1] + 10)
       .attr("y", (d, i) => 0 )
       .attr("width", 25)
       .attr("height", (d, i) => d[1] /2 )
       .attr("fill", "navy")
       .attr("class", "bar")
       .append("title")
       .text((d) => d)

  svg.selectAll("text")
       .data(dataSet)
       .enter()
       .append("text")
       .text((d) => d)
       .attr("x", (d, i) => i * 30 +10)
       .attr("y", (d, i) => 15)

});

为了避免回调，您可以将对 readTextFile 的响应包装在 Promise 中，然后使用 async/await 到 dataSet = await readTextFile(...)。

如何从 JSON 生成矩形？

How can I make rects from JSON?

javascript

svg

d3.js