Skip to content

Instantly share code, notes, and snippets.

View afrinc's full-sized avatar
📜
Being

Afrin Chakure afrinc

📜
Being
17 followers · 16 following
  • Pune, India
View GitHub Profile
@afrinc
afrinc / index.js
Created April 21, 2020 13:18
merging all elements together
circle = g.merge(circle);
@afrinc
afrinc / index.js
Created April 21, 2020 13:18
adding text inside the embedded circle
const count_text = g
.append("svg:text")
.attr("class", "countText")
.attr("r", 10)
.attr("dx", function(d) {
let X = outerNodebbox.x;
let WIDTH = outerNodebbox.width;
return X + (2.5 * WIDTH) / 3;
})
.attr("dy", function(d) {
@afrinc
afrinc / index.js
Created April 21, 2020 13:17
adding circle inside rectangular node
const count_circle = g
.append("svg:circle")
.attr("class", "countCircle")
.style("visibility", "unset")
.attr("r", 10)
.attr("cx", function(d) {
let X = outerNodebbox.x;
let WIDTH = outerNodebbox.width;
return X + (2.5 * WIDTH) / 3;
})
@afrinc
afrinc / index.js
Created April 21, 2020 13:17
adding description text inside rectangular node
const description = g
.append("svg:text")
.attr("class", "description")
.attr("dx", function(d) {
return outerNodebbox.width / 3;
})
.attr("dy", function(d) {
return (2 * outerNodebbox.height) / 3;
})
.attr("dominant-baseline", "central")
@afrinc
afrinc / index.js
Created April 21, 2020 13:16
adding text inside rectangular node
const label = g
.append("svg:text")
.attr("class", "name")
.attr("dx", function(d) {
return outerNodebbox.width / 3;
})
.attr("dy", function(d) {
return outerNodebbox.height / 3;
})
.attr("dominant-baseline", "central")
@afrinc
afrinc / index.js
Created April 21, 2020 13:15
Appending image inside rectangular node
const images = g
.append("svg:image")
.attr(
"xlink:href",
"https://img.icons8.com/ios-glyphs/30/000000/superman.png"
)
.attr("x", function(d) {
let X = outerNodebbox.x;
return X + 10;
})
@afrinc
afrinc / index.js
Created April 21, 2020 13:14
Retrieving coordinates of the created node
var outerNodebbox = rectangularNode.node().getBBox();
@afrinc
afrinc / index.js
Created April 21, 2020 13:13
appending rectangular node
const rectangularNode = g
.append("svg:rect")
.attr("class", "node")
.attr("x", d => {
return 0;
})
.attr("y", d => {
return 0;
});
@afrinc
afrinc / index.js
Last active April 21, 2020 13:12
inserting data into nodes
let circle = svg
.append("svg:g")
.selectAll("g")
.data(nodes, d => d.id);
const g = circle.enter();
@afrinc
afrinc / index.html
Created April 21, 2020 13:10
script adding svg element
<script>
var width = 500, height = 400;
const nodes = [
{
id: 0,
name: "ServiceGroup",
description: "Port : 80",
connection_count: 3
}
];