Is it possible to create a radial grouped circle using d3.js, similar to the image below:
https://i.sstatic.net/1Hwd2.jpg
I have written some code as shown below.
However, I am facing challenges in connecting every circle with a curved line and displaying a tooltip when hovering over a circle. Any help on how to achieve this would be greatly appreciated. Thank you!
Update: I have now updated my code to draw either a circle or an image element within a larger circle.
const mockedData = {
"nodes": [
{
"name": "Node1one",
"label": "Node1",
"id": 1,
"x": 120,
"y": 120,
},
{
"name": "Node2",
"label": "Node2",
"id": 2,
"x": 350,
"y": 180,
},
]
}
const imgList = {
"images": [
{
"image": 'https://via.placeholder.com/30x30',
"x": -50,
},
{
"image": 'https://via.placeholder.com/30',
"x": 20
}
]
}
const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");
let { links, nodes } = mockedData;
let { images } = imgList;
const ticked = ( node) => {
node.attr("transform",
function (d) {return "translate(" + d.x + ", " + d.y + ")";});
}
const tickedImg = (nodeImg) => {
nodeImg.attr("x", function (d) {return d.x })
}
const node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
node.append('circle').attr("r", 86); //radius
svg.selectAll('circle')
.on('click', function () { // arrow function will produce this = undefined
d3.selectAll('circle')
.style("fill", "lightgray");
d3.select(this)
.style("fill", "aliceblue");
})
.on('mouseover', function () {
d3.selectAll('circle')
.style("stroke", "black");
d3.select(this)
.style("stroke", "green");
})
ticked( node )
const nodeText = node.append("text")
.attr("y", -70);
nodeText.selectAll("tspan.text")
.data((d) => d.name.split(" "))
.enter()
.append("tspan")
.attr("class", "text")
.text(d => d)
.attr("x", -30)
.attr("y", -60)
node.append("title")
.text(function (d) {return d.id;});
const nodeImg = node.selectAll("image")
.data(images)
.enter()
.append("image")
.attr("xlink:href", (d) => d.image)
.attr("width", 27)
.attr("height", 30)
tickedImg (nodeImg)<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="100%" viewbox="0 0 2000 1000"></svg>