D3pie.js labels.inner distance from the center

Question

I use http://d3pie.org/#docs-settings But there is no such parameter as the distance from the center to the internal labels. Can someone tried to do it? I want to move the internal labels closer to the outer edge of the circle. Thank you so much.

now so:

enter image description here

need:

enter image description here

score 0 · Answer 1 · edited May 23 '17 at 10:29

You can position the labels by defining a new arc as suggested in https://stackoverflow.com/a/8270668/2314737 and then applying the centroid function.

I defined a new arc newarc with an inner radius equal to 2/3 of the outer radius.

var newarc = d3.svg.arc()
    .innerRadius(2 * radius / 3)
    .outerRadius(radius);

Here's the JS code:

var width = 300;
var height = 300;

var svg = d3.select("body").append("svg");
svg.attr("width", width)
    .attr("height", height);

var dataset = [11, 13, 18, 25, 31];

var radius = width / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(radius);

var pie = d3.layout.pie();

var arcs = svg.selectAll("g.arc")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + radius + ", " + radius + ")");

//Draw arc paths
var color = d3.scale.category10();

arcs.append("path")
    .attr("fill", function (d, i) {
    console.log(d);
    return color(i);
})
    .attr("stroke", "white")
    .attr("d", arc);


var newarc = d3.svg.arc()
    .innerRadius(2 * radius / 3)
    .outerRadius(radius);

// Place labels
arcs.append("text")
    .attr("transform", function (d) {
    return "translate(" + newarc.centroid(d) + ")";
})
    .attr("text-anchor", "middle")
    .attr("fill", "white")
    .text(function (d) {
    return d.value + "%";
});

Here is a working demo: http://jsfiddle.net/user2314737/kvz8uev8/2/

score 0 · Answer 2 · answered Jan 26 '15 at 12:27

I decided to enroll in another way. I added my property in the object and function of positioning inner labels in D3pie file d3pie.js

This function is located on the line - 996 d3pie.js

positionLabelGroups: function(pie, section) {
  d3.selectAll("." + pie.cssPrefix + "labelGroup-" + section)
   .style("opacity", 0)
   .attr("transform", function(d, i) {
    var x, y;
    if (section === "outer") {
     x = pie.outerLabelGroupData[i].x;
     y = pie.outerLabelGroupData[i].y;
    } else {
     var pieCenterCopy = extend(true, {}, pie.pieCenter);

     // now recompute the "center" based on the current _innerRadius
     if (pie.innerRadius > 0) {
      var angle = segments.getSegmentAngle(i, pie.options.data.content, pie.totalSize, { midpoint: true });
      var newCoords = math.translate(pie.pieCenter.x, pie.pieCenter.y, pie.innerRadius, angle);
      pieCenterCopy.x = newCoords.x;
      pieCenterCopy.y = newCoords.y;
      
      //console.log('i ='+i , 'angle='+angle, 'pieCenterCopy.x='+pieCenterCopy.x, 'pieCenterCopy.y='+pieCenterCopy.y);
     }

     var dims = helpers.getDimensions(pie.cssPrefix + "labelGroup" + i + "-inner");
     var xOffset = dims.w / 2;
     var yOffset = dims.h / 4; // confusing! Why 4? should be 2, but it doesn't look right
     
     // ADD VARAIBLE HERE !!! =)
     var divisor = pie.options.labels.inner.pieDistanceOfEnd;
     x = pieCenterCopy.x + (pie.lineCoordGroups[i][0].x - pieCenterCopy.x) / divisor;
     y = pieCenterCopy.y + (pie.lineCoordGroups[i][0].y - pieCenterCopy.y) / divisor;

     x = x - xOffset;
     y = y + yOffset;
    }

    return "translate(" + x + "," + y + ")";
   });
 },

I add var divisor = pie.options.labels.inner.pieDistanceOfEnd;

Then I spotted this property devoltnyh the configuration file bhp and passed for plotting parameters.

inner: {
   format: "percentage",
   hideWhenLessThanPercentage: null,
   pieDistanceOfEnd : 1.8
  },

Meaning pieDistanceOfEnd: 1 hang tag on the outer radius of the chart value pieDistanceOfEnd: 1.25 turn them slightly inward .... You can play these parameters and to achieve the desired option.

score 0 · Answer 3 · answered Sep 13 '16 at 17:37

In d3pie.js look for the function positionLabelGroups. In this function both labels (outer and inner) are positioned.

To modify the distance from the center you can play with the x,y here:

x = pieCenterCopy.x + (pie.lineCoordGroups[i][0].x - pieCenterCopy.x) / 1.8;
y = pieCenterCopy.y + (pie.lineCoordGroups[i][0].y - pieCenterCopy.y) / 1.8;

What I did was decreasing the 1.8 to 1.2 and obtained what youre looking for. Dont know what the other vars do, but you can study the code to figure it out

D3pie.js labels.inner distance from the center

3 Answers3