D3pie.js标签。距离中心的距离

Question

我使用http://d3pie.org/#docs-settings 但是没有从中心到内部标签的距离这样的参数。 有人可以尝试这样做吗？ 我想将内部标签移动到更靠近圆圈的外边缘。 非常感谢你。

现在如此：

需要：

Answer 1

您可以按照https://stackoverflow.com/a/8270668/2314737中的建议定义新弧，然后应用centroid功能来定位标签。

我定义了一个新的弧newarc，其内半径等于外半径的2/3。

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

这是JS代码：

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 + "%";
});

这是一个有效的演示：http://jsfiddle.net/user2314737/kvz8uev8/2/

Answer 2

我决定以另一种方式报名。 我在D3pie文件d3pie.js

中定位内部标签的对象和功能中添加了我的属性

此功能位于第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 + ")";
			});
	},

我添加了var divisor = pie.options.labels.inner.pieDistanceOfEnd;

然后我发现这个属性devoltnyh配置文件bhp并传递给绘图参数。

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

含义pieDistanceOfEnd：图表外半径上的1个吊牌 value pieDistanceOfEnd：1.25稍微向内转...... 您可以播放这些参数并获得所需的选项。

Answer 3

在d3pie.js中查找函数 positionLabelGroups 。在此功能中，两个标签（外部和内部）都已定位。

要修改距离中心的距离，您可以使用x，y来播放：

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

我所做的是将1.8降低到1.2并获得你想要的东西。不知道其他变量做了什么，但你可以研究代码来搞清楚