Вообще говоря, вам часто нужно обрабатывать данные в форме, удобной для 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 d.X*19;
})
.attr("cy", function (d) {
return d.Y*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>