來自嵌套對象的 D3.js 散點圖
[英]D3.js scatterplot from nested object
問題描述
我想創建一個簡單的散點圖，循環遍歷嵌套對象中的 X 和 Y。 我知道如何從一個簡單的 X、Y 值數組制作散點圖，但希望得到一些幫助來遍歷嵌套的 X 和 Y 值。 我是否需要使用 forEach 或其他一些功能操作才能訪問這些值？ 任何幫助表示贊賞！
//Width and height var w = 500; var h = 100; var dataset = [ { "key": 1, "sub_object": [ { "name": "A", "X": 1, "Y": 1 }, { "name": "B", "X": 2, "Y": 2 }, { "name": "C", "X": 3, "Y": 3 }, { "name": "D", "X": 4, "Y": 4 }, { "name": "E", "X": 5, "Y": 5 } ] } ] //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function (d) { return dataset.sub_object.X; }) .attr("cy", function (d) { return dataset.sub_object.Y; }) .attr("r", function (d) { return Math.sqrt((h - dataset.sub_object.Y)) });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.js"></script> </head> <body> </body> </html>
1 個解決方案
解決方案1
1 已采納 2020-01-26 19:07:21
一般來說，您通常需要將數據處理為便於 D3 的形式。 您如何執行此操作取決於您嘗試顯示的數據。
例如，對於來自您的數據的簡單 X,Y 圖，您可以制作一個您知道如何繪制的簡單 X,Y 對象數組：
var dataset = [ { "key": 1, "sub_object": [ { "name": "A", "X": 1, "Y": 1 }, { "name": "B", "X": 2, "Y": 2 }, { "name": "C", "X": 3, "Y": 3 }, { "name": "D", "X": 4, "Y": 4 }, { "name": "E", "X": 5, "Y": 5 } ] } ] let processedData = dataset.reduce((arr, obj) => { return arr.concat(obj.sub_object.map(({X, Y}) => ({X, Y}))) }, []) // simple array of X, Y objects console.log(processedData)
然后在 D3 中，只需確保使用傳遞給函數的d參數來獲取X和Y值。
//Width and height var w = 500; var h = 100; var dataset = [ { "key": 1, "sub_object": [ { "name": "A", "X": 1, "Y": 1 }, { "name": "B", "X": 2, "Y": 2 }, { "name": "C", "X": 3, "Y": 3 }, { "name": "D", "X": 4, "Y": 4 }, { "name": "E", "X": 5, "Y": 5 } ] } ] // transform data into convenient form: let processedData = dataset.reduce((arr, obj) => { return arr.concat(obj.sub_object.map(({X, Y}) => ({X, Y}))) }, []) //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("circle") .data(processedData) .enter() .append("circle") .attr("cx", function (d) { return dX*19; }) .attr("cy", function (d) { return dY*19; }) .attr("r", function (d) { return 2 });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.js"></script> </head> <body> </body> </html>
D3.js散點圖與符號
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.