chart = {
const data = [{"name":"Others","value":16140,"color":"rgb(217, 56, 119)"},{"name":"Amazon","value":14921,"color":"rgb(228, 86, 103)"},{"name":"eBay","value":6338,"color":"#FFC96C"},{"name":"Tesco Groceries","value":2041,"color":"#E0FF69"},{"name":"Sainsbury's","value":1767,"color":"#89FF66"},{"name":"Marks & Spencer","value":1077,"color":"#62FF97"},{"name":"Debenhams","value":631,"color":"#5FFFEF"},{"name":"Just Eat","value":588,"color":"#5CB2FF"},{"name":"Next","value":558,"color":"#5F58FF"},{"name":"Argos","value":463,"color":"#BC55FF"},{"name":"John Lewis","value":423,"color":"#FF51E0"}];
const arcs = pie(data);
const svg = d3.create("svg")
.attr("viewBox", [-width / 3, -height / 1.5, width, height * 1.25]);
svg.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc)
.append("title")
.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 15)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => {
const _d = arc.centroid(d);
if((d.endAngle - d.startAngle) <= 0.35) {
_d[0] *= 2.2;
_d[1] *= 2.2;
} else {
_d[0] *= 1.7;
_d[1] *= 1.7;
}
return `translate(${_d})`;
})
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.attr("fill", d => (d.endAngle - d.startAngle) <= 0.35 ? color(d.data.name) : "#fff")
.text(d => d.data.value))
.call(text => text.append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.attr("fill", d => (d.endAngle - d.startAngle) <= 0.35 ? color(d.data.name) : "#fff")
.text(d => (~~((d.endAngle - d.startAngle) / (2 * Math.PI) * 10000)) / 100 + '%'));
var legendRectSize = 10;
var legendSpacing = 6;
var enteringLabels = svg.selectAll('.legend')
.data(color.domain())
.enter()
var lg = enteringLabels.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = 28 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
})
lg.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', (i) => { if(typeof i === 'number') {data[i+1].color = color(i);} console.log(data
); return color(i);})
.style('stroke', color)
var labelGroups = enteringLabels.append('g').attr('class', 'label').data(arcs);
var lines = labelGroups.append('line').attr('x1', function(d, i) {
console.log(d, arcs[d]);
const _d = arc.centroid(d);
return _d[0];
}).attr('y1', function(d) {
const _d = arc.centroid(d);
return _d[1];
}).attr('x2', function(d) {
const _d = arc.centroid(d);
const midAngle = Math.atan2(_d[1], _d[0]);
return Math.cos(midAngle) * 240;
}).attr('y2', function(d) {
const _d = arc.centroid(d);
const midAngle = Math.atan2(_d[1], _d[0]);
return Math.sin(midAngle) * 240;
}).attr('class','label-line').attr('stroke', function(d, i) {
return color(i-1);
}).filter(d => {
const _d = arc.centroid(d);
return (d.endAngle - d.startAngle) > 0.35;
}).attr('style','display: none;')
console.log(lines, labelGroups);
/**/
lg.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize)
.text(function(d) { return d; });
return svg.node();
}