My problem is that my polylines in my chart are not correct positioning on the exact data on my slices which are given in my code
This is my code of slices and polylines when yu convert this code into html this will run and place on W3 school or place this code on a function and call on html on click
for reference the whole code
https://observablehq.com/@mast4461/d3-donut-chart-labels
this is a donut but exact polylines will place on their correct positioning and my chart is pie chart in 3D-view i will attach my UI in image
var slices = vis
.append("svg:g")
.attr("transform", "translate(" + x + "," + y + ")")
.attr("class", "slice");
slices
.selectAll(".innerSlice")
.data(_data)
.enter()
.append("path")
.attr("class", "innerSlice")
.style("fill", function (d) {
return d3.hsl(d.data.color).darker(0.7);
})
.attr("d", function (d) {
return pieInner(d, rx + 0.5, ry + 0.5, h, ir);
})
.each(function (d) {
this._current = d;
});
slices
.selectAll(".topSlice")
.data(_data)
.enter()
.append("path")
.attr("class", "topSlice")
.style("fill", function (d) {
return d.data.color;
})
.style("stroke", function (d) {
return d.data.color;
})
.attr("d", function (d) {
return pieTop(d, rx, ry, ir);
})
.each(function (d) {
this._current = d;
});
slices
.selectAll(".outerSlice")
.data(_data)
.enter()
.append("path")
.attr("class", "outerSlice")
.style("fill", function (d) {
return d3.hsl(d.data.color).darker(0.7);
})
.attr("d", function (d) {
return pieOuter(d, rx - 0.5, ry - 0.5, 40, 5, 50, 100, 0.02);
})
.each(function (d) {
this._current = d;
});
slices
.selectAll(".percent")
.data(_data)
.enter()
.append("text")
.attr("class", "percent")
.attr("x", function (d) {
return 0.6 * rx * Math.cos(0.5 * (d.startAngle + d.endAngle));
})
.attr("y", function (d) {
return 0.6 * ry * Math.sin(0.5 * (d.startAngle + d.endAngle));
})
.text(getPercent)
.each(function (d) {
this._current = d;
});
function pieInner(d, rx, ry, h, ir) {
var startAngle = d.startAngle < Math.PI ? Math.PI : d.startAngle;
var endAngle = d.endAngle < Math.PI ? Math.PI : d.endAngle;
var sx = ir * rx * Math.cos(startAngle),
sy = ir * ry * Math.sin(startAngle),
ex = ir * rx * Math.cos(endAngle),
ey = ir * ry * Math.sin(endAngle);
var ret = [];
ret.push(
"M",
sx,
sy,
"A",
ir * rx,
ir * ry,
"0 0 1",
ex,
ey,
"L",
ex,
h + ey,
"A",
ir * rx,
ir * ry,
"0 0 0",
sx,
h + sy,
"z"
);
return ret.join(" ");
}
function pieTop(d, rx, ry, ir) {
if (d.endAngle - d.startAngle == 0) return "M 0 0";
var sx = rx * Math.cos(d.startAngle),
sy = ry * Math.sin(d.startAngle),
ex = rx * Math.cos(d.endAngle),
ey = ry * Math.sin(d.endAngle);
var ret = [];
ret.push(
"M",
sx,
sy,
"A",
rx,
ry,
"0",
d.endAngle - d.startAngle > Math.PI ? 1 : 0,
"1",
ex,
ey,
"L",
ir * ex,
ir * ey
);
ret.push(
"A",
ir * rx,
ir * ry,
"0",
d.endAngle - d.startAngle > Math.PI ? 1 : 0,
"0",
ir * sx,
ir * sy,
"z"
);
return ret.join(" ");
}
function pieOuter(d, rx, ry, h) {
var startAngle = d.startAngle > Math.PI ? Math.PI : d.startAngle;
var endAngle = d.endAngle > Math.PI ? Math.PI : d.endAngle;
var sx = rx * Math.cos(startAngle),
sy = ry * Math.sin(startAngle),
ex = rx * Math.cos(endAngle),
ey = ry * Math.sin(endAngle);
var ret = [];
ret.push(
"M",
sx,
h + sy,
"A",
rx,
ry,
"0 0 1",
ex,
h + ey,
"L",
ex,
ey,
"A",
rx,
ry,
"0 0 0",
sx,
sy,
"z"
);
return ret.join(" ");
}
var radius = 200;
var arc = d3
.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 50);
var outerArc = d3
.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9);
// Add the polylines between chart and labels:
slices
.selectAll("allPolylines")
.data(_data)
.enter()
.append("polyline")
.attr("stroke", "black")
.style("fill", "none")
.attr("stroke-width", 1)
.attr("points", function (d) {
console.log("checkkkshdfkh", d);
var posA = arc.centroid(d) // line insertion in the slice
var posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that
var posC = outerArc.centroid(d); // Label position = almost the same as posB
let tempX= 0.6 * rx * Math.cos(0.5 * (d.startAngle + d.endAngle));
let tempY= 0.6 * ry * Math.sin(0.5 * (d.startAngle + d.endAngle))
var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left
posC[0] = radius * 0.95 * (midangle < Math.PI ? 1 : -1);
console.log("checknskdnfknsdf",posA,[tempX,tempY])
return [posA, posB, posC]
});
My UI looks like
I try https://observablehq.com/@mast4461/d3-donut-chart-labels and i try most of the code but it didn’t work
I expect that my polylines are place on the exact slice based on the data and also
