d3.js:json

作業中.icon

jsonファイルをブラウザのデバックコンソールに出力。

code:test1.js

.then(function(data) {

console.log(data);

})

code:test1.json

{

"name": "Top Level",

"children": [

{

"name": "Level 2: A",

"children": [

{ "name": "Son of A" },

{ "name": "Daughter of A" }

]

},

{ "name": "Level 2: B",

"children": [

{ "name": "Bの長男" },

{ "name": "Bの次男" },

{ "name": "Bの長女" }

]

}

]

}

code:test2.js

var jsonCircles = [

{

"x_axis": 30,

"y_axis": 30,

"radius": 20,

"color" : "green"

}, {

"x_axis": 70,

"y_axis": 70,

"radius": 20,

"color" : "purple"

}, {

"x_axis": 110,

"y_axis": 110,

"radius": 20,

"color" : "pink"

}, {

"x_axis": 150,

"y_axis": 150,

"radius": 20,

"color" : "orange"

}];

// debug log

//console.log(d3.select("body").append("svg").attr("width", 200).attr("height", 200).selectAll("circle").data(jsonCircles).enter().append("circle"));

//Create the SVG Viewport

var svgContainer = d3.select("body").append("svg")

.attr("width", 400)

.attr("height", 400);

//Add circles to the svgContainer

var circles = svgContainer.selectAll("circle")

.data(jsonCircles)

.enter()

.append("circle");

//Add the circle attributes

var circleAttributes = circles

.attr("cx", function (d) { return d.x_axis; })

.attr("cy", function (d) { return d.y_axis; })

.attr("r", function (d) { return d.radius; })

.style("fill", function(d) { return d.color; });

//Add the SVG Text Element to the svgContainer

var text = svgContainer.selectAll("text")

.data(jsonCircles)

.enter()

.append("text");

//Add SVG Text Element Attributes

var textLabels = text

.attr("x", function(d) { return d.x_axis; })

.attr("y", function(d) { return d.y_axis; })

.text( function (d) { return "( " + d.x_axis + ", " + d.y_axis +" )"; })

.attr("font-family", "sans-serif")

.attr("font-size", "20px")

.attr("fill", "red");

jsonファイルをブラウザのデバックコンソールに出力。

code:d3script.js

.then(function(data) {

console.log(data);

})

https://img.shields.io/badge/D3.js-json-F9A03C.svg?logo=D3.js&style=for-the-badge