来自嵌套对象的 D3.js 散点图
[英]D3.js scatterplot from nested object
问题描述
I want to create a simple scatter plot looping through the X and Y in a nested object.
我想创建一个简单的散点图，循环遍历嵌套对象中的 X 和 Y。 I know how to make a scatterplot from a simple array of X, Y values but was hoping to get some help looping through the nested X and Y values.我知道如何从一个简单的 X、Y 值数组制作散点图，但希望得到一些帮助来遍历嵌套的 X 和 Y 值。 Do I need to be using a forEach or some other functional operation in order to access these values?我是否需要使用 forEach 或其他一些功能操作才能访问这些值？ Any help appreciated!任何帮助表示赞赏！
//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
Generally speaking, you will often need to process your data to be in a form that is convenient for D3.一般来说，您通常需要将数据处理为便于 D3 的形式。 How you do that depends on the data you are trying to display.您如何执行此操作取决于您尝试显示的数据。
For example for a simple X,Y plot from your data you could make an array of simple X,Y objects which you know how to plot:例如，对于来自您的数据的简单 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)
Then in D3, just make sure you are using the d argument passed to the functions to get the X and Y values.然后在 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.