Here im added the link from circle center to circle center but i want to connect from circle edge to edge
I want to connect the links from node edge to edge but im getting node center to center
is i did mistake in my code please help me out if any one know answer for this problem
here is my full working code
const VocabularyGraphh = () => {
const svgRef = useRef(null);
React.useEffect(() => {
const svg = d3.select(svgRef.current),
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(2,2)"),
format = d3.format(",d");
const links = [
{ source: "animate1", target: "animate4" },
{ source: "animate6", target: "animate9" },
// { source: "animate9", target: "animate6" },
{ source: "animate3", target: "animate2" },
{ source: "animate1", target: "animate8" },
{ source: "animate3", target: "animate5" },
// { source: "analytics1", target: "analytics2" },
];
let root = {
children: [
{
name: "analytics1",
children: [
{
name: "animate1",
size: 1500,
},
{
name: "animate2",
size: 1500,
},
{
name: "animate3",
size: 1500,
},
{
name: "animate33",
size: 1500,
},
{
name: "animate23",
size: 1500,
},
{
name: "animate32",
size: 1500,
},
{
name: "animate11",
size: 1500,
},
{
name: "animate22",
size: 1500,
},
{
name: "animate34",
size: 1500,
},
{
name: "animate16",
size: 1500,
},
{
name: "animate20",
size: 1500,
},
{
name: "animate3",
size: 1500,
},
],
},
{
name: "analytics2",
children: [
{
name: "animate4",
size: 1500,
},
{
name: "animate5",
size: 1500,
},
{
name: "animate6",
size: 1500,
},
],
},
{
name: "analytics3",
children: [
{
name: "animate7",
size: 1500,
},
{
name: "animate8",
size: 1500,
},
{
name: "animate9",
size: 1500,
},
],
},
],
};
// svg
// .append("svg:defs")
// .append("svg:marker")
// .attr("id", "arrow")
// .attr("viewBox", "0 0 10 10")
// .attr("refX", 10)
// .attr("refY", 5)
// .attr("markerUnits", "strokeWidth")
// .attr("markerWidth", 6)
// .attr("markerHeight", 3)
// .attr("orient", "auto")
// .append("svg:path")
// .style("stroke", "none")
// .attr("d", "M 0 0 L 10 5 L 0 10 z");
const pack = d3
.pack()
.size([diameter / 2, diameter / 2])
.padding(100);
root = d3
.hierarchy(root)
.sum(function (d) {
return d.size;
})
.sort(function (a, b) {
return b.value - a.value;
});
const node = g
.selectAll(".node")
.data(pack(root).descendants())
.enter()
.filter(function (d) {
return !!d.data.name;
})
.append("g")
.attr("id", function (d) {
return d.data.name;
})
.attr("class", function (d) {
return d.children ? "node" : "leaf node";
})
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title").text(function (d) {
return d.data.name + "n" + format(d.value);
});
const arrow = svg.selectAll("path.arrow").data(links, JSON.stringify);
arrow
.enter()
.append("path")
.attr("class", "arrow")
.attr("x1", function (d) {
console.log(d);
let translate = getTranslate(d.source);
console.log(translate);
return translate[0];
})
.attr("x2", function (d) {
let translate = getTranslate(d.target);
return translate[0];
})
.attr("y1", function (d) {
let translate = getTranslate(d.source);
return translate[1];
})
.attr("y2", function (d) {
let translate = getTranslate(d.target);
return translate[1];
})
.attr("d", function (d) {
// console.log(d);
let source = getTranslate(d.source),
target = getTranslate(d.target),
x1 = source[0],
x2 = target[0],
y1 = source[1],
y2 = target[1];
console.log(source);
console.log(target);
// let dx = x1 - x2,
// dy = y1 - y2,
// dr = Math.sqrt(dx * dx + dy * dy);
return (
"M" + x1 + "," + y1 + "A" + 0 + "," + 0 + " 0 0,1 " + x2 + "," + y2
);
})
.style("stroke", "black")
.style("fill", "none")
.style("stroke-width", 1)
.attr("marker-end", "url(#arrow)")
.attr("class", "hidden-arrow ");
// .attr("stroke-width", 1);
node
.append("circle")
.attr("r", function (d) {
console.log(d);
return d.r;
})
.attr("class", "pink");
node.filter(function (d) {
return !d.children;
});
// .append("text")
// .attr("dy", "0.3em")
// .text(function (d) {
// return d.data.name.substring(0, d.r / 3);
// });
function getTranslate(datum) {
const circle = d3.select("#" + datum);
const string = circle.attr("transform");
const translate = string
.substring(string.indexOf("(") + 1, string.indexOf(")"))
.split(",");
return translate;
}
}, []);
return (
<div>
<svg ref={svgRef} width="960" height="960"></svg>
</div>
);
};
export default VocabularyGraphh;
if anyone give this solution thats so appreciatable