score:1

You need to make couple of changes in the d3 code to overcome overlapping.

1) Increase the width of SVG.

2) Translate pie chart to the center of SVG.

3) Also translate the legend group towards right.

Please find attached updated code.

<!DOCTYPE html>
<html>
<head>
    <script src="http://d3js.org/d3.v5.min.js"></script>
</head>
<body>
    <div class="custom-chart"></div>
    <script>
        var details = [{ "name": "GRAND DING HOUSE Hong Kong HK", "label": "72" }, { "name": "MI-NE SUSHI HONG KONG HK", "label": "10" }, { "name": "TNS INVESTMENT LIMITED", "label": "6" }, { "name": "GRAND DING HOUSE Hong Kong HK", "label": "2" }, { "name": "MI-NE SUSHI HONG KONG HK", "label": "1" }, { "name": "Other", "label": "9" }];
chartScript(details, '.custom-chart'); 
function chartScript(details, clsName) {
    var lblName = new Array(6); var i = 0;
    for (var index in details) {
        lblName[i] = details[index];
        i++;
    }
    var rectWidth = 650;
    var width = rectWidth, height = 350;
    let colors = d3.scaleOrdinal().domain(lblName).range(['#A4A4A4', '#0073AA', '#009DD9', '#005D87', '#00A76D', '#6DC067']);
    let svg = d3.select(clsName).append('svg').attr('width', width).attr('height', height);
    let data = d3.pie().sort(null).value(function (d) {return d.label;})(details);
    let segments = d3.arc().innerRadius(55).outerRadius(120).padAngle(0.05).padRadius(30);
    let sections = svg.append('g').attr('transform', 'translate('+rectWidth/2+',145)').selectAll('path').data(data);
    sections.enter().append('path').attr('d', segments).attr('fill', function (d, i) {return colors(i);});
    let content = d3
        .select(clsName)
        .select('g')
        .selectAll('text')
        .data(data);
    content
        .enter()
        .append('text')
        .classed('inside', true)
        .each(function (d) {
            let center = segments.centroid(d);
            d3.select(this)
                    .attr('x', center[0] - 10)
                    .attr('y', center[1])
                    .text(d.data.label + '%');
        });
    let legends = svg.append('g').attr('transform', 'translate(30, 270)').selectAll('.legends').data(data);
    let legend = legends.enter().append('g').classed('legends', true).attr('transform', function (d, i) {
            if (i < 3) {return 'translate(0,' + (i + 1) * 20 + ')';} 
            else { return 'translate('+rectWidth/2+',' + (i - 3 + 1) * 20 + ')'; }
        });
    legend.append('rect').attr('width', 10).attr('height', 10).attr('fill', function (d, i) {return colors(i);})
        .attr('x', -20)
        .attr('y', 0);
    legend.append('text').classed('label', true).text(function (d) {return d.data.name;})
    .attr('fill', function (d, i) {return colors(i); }).attr('x', 15).attr('y', 10);
}
    </script>
</body>

</html>


Related Query

More Query from same tag