我怎樣才能從JSON中制作矩形？ -有解無憂

我正在做一個學習D3可視化的專案我在做一個學習d3可視化的專案，但我的堆疊推薦沒有出現。你能幫助我嗎？

我試著用一個簡單的陣列來表示資料，它起作用了，我只能翻轉y。但對于這個JSON資料，沒有任何作用

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

span class="hljs-keyword">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.ready ==4 && rawFile.status =="200") {
            callback(rawFile.responseText) 。
        }
    }
    rawFile.send(null)。
}
//useage: 
readTextFile("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json"/span>, function(text){
    data = JSON.parse（text）。
      dataSet = data["data"]
    console.log（資料集）。
});

const w = 700。
const h = 500;

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

svg.selectAll("rect")
  .data(dataSet)
  .enter()
       .append("rect"/span>)
       . 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"/span>, "bar")
       .append("title")
       .text((d) =>  d)

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

uj5u.com熱心網友回復：

問題是，XMLHttpRequest是異步的，而且你是在傳遞給readTextFile的回呼之外定義d3邏輯。最簡單的解決方案是在回呼中包含d3邏輯：

readTextFile("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json"/span>, function(text){ data = JSON.parse（text）。 dataSet = data["data"] console.log（資料集）。 //在這里添加d3邏輯。 const w = 700; const h = 500; const svg = d3.select("body"/span>) .append("svg") .attr("width",w) .attr("heigth",h) .attr("style", "outline: thin solid red;"); svg.selectAll("rect") .data(dataSet) .enter() .append("rect"/span>) //改變了這一行，洗掉了[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"/span>, "bar") .append("title") .text((d) => d) svg.selectAll("text") .data(dataSet) .enter() .append("text"/span>) .text((d) => d) . attr("x", (d, i) => i * 30 10) .attr("y", (d, i) => 15) });

為了避免回呼，你可以把對readTextFile的回應包在一個Promise中，然后使用async/await來dataSet = await readTextFile(...)。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/320131.html

標籤：

上一篇：如何創建一個由兩個重疊的圖形組成的SVG圖示，其中一個有洞？

下一篇：SQL查詢--選擇多個結果作為一個列欄位