d3.js:json
jsonファイルをブラウザのデバックコンソールに出力。
test1.jsconst proxy = 'https://cors-anywhere.herokuapp.com/'
d3.json(proxy + "https://scrapbox.io/api/code/suto3/d3.js:json/test1.json")
.then(function(data) {
console.log(data);
})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の長女" }
]
}
]
}test2.jsvar 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ファイルをブラウザのデバックコンソールに出力。
d3script.jsd3.json("https://scrapbox.io/api/code/suto3/d3.js:json/test1.json")
.then(function(data) {
console.log(data);
})