D3pie.js labels.inner 到中心的距离答案

【问题标题】：D3pie.js labels.inner distance from the centerD3pie.js labels.inner 到中心的距离
【发布时间】：2015-03-24 18:31:15
【问题描述】：

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

现在这样：

需要：

【问题讨论】：

标签： javascript d3.js

【解决方案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/

【讨论】：

【解决方案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 稍微向内转动它们...... 您可以通过播放这些参数来实现所需的选项。

【讨论】：

【解决方案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 并获得了您想要的。不知道其他 vars 是做什么的，但你可以研究代码来弄清楚

【讨论】：