d3pie icon indicating copy to clipboard operation
d3pie copied to clipboard

labels.inner distance from the center

Open iron-viper opened this issue 10 years ago • 2 comments

Hey there. How can I change the distance from the center to the inner labels? In advance thank you very much for your help.

iron-viper avatar Jan 26 '15 09:01 iron-viper

Hey, I found a solution) Maybe we should add this property in the future functionality?

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.

iron-viper avatar Jan 26 '15 12:01 iron-viper

Thanks @iron-viper! Other people have requested this feature too, so I'll try to get this into an upcoming release.

benkeen avatar Feb 09 '15 16:02 benkeen