防止D3中的文本剪切(JavaScript图表) [英] Preventing Text-Clipping in D3 (Javascript Charting)
问题描述
我在D3中绘制了一个饼形图,但是遇到了文本剪切本身的问题:
这是我的绘制函数:
pie:function(config)
{
var width = config.width || 840,
height = config.height || 520,
radius = Math.min(width,height)/ 2;
var color = this._color = d3.scale.ordinal()。range([#98abc5,#8a89a6,#7b6888,#6b486b,#a05d56 ,#d0743c,#ff8c00]);
var arc = d3.svg.arc()。outerRadius(radius - 10).innerRadius(0);
var pie = d3.layout.pie()。sort(null).value(function(d){return d.value;});
var svg = d3.select(body)append(svg)。attr('id',config.id ||'chart')。attr(width,width ).attr(height,height)
.append(g)。attr(transform,translate(+ width / 2 +,+ height / 2 +)
var g = svg.selectAll(。arc)。data(pie(config.data))。enter()。append(g)。attr(class,arc );
g.append(path)attr(d,arc).style(fill,function(d){return color(d.data.name);});
g.append(text)
.attr(transform,function(d){returntranslate(+ arc.centroid(d)+) )
.attr(dy,.35em)
.style(text-anchor,middle)
.text(function(d){return d.data 。名称; });
return $('#'+(config.id ||'chart'));有没有一种简单的方法来防止这样的文本裁剪? 解决方案 更新:查看如果有足够的空间,D3将圆弧标签放在饼图中更全面的答案。
如果通过避免剪辑,意味着< text>
元素不应该被随后的弧遮挡,那么可以通过使< text> code>元素出现在DOM中的 .arc
元素之后。执行此操作的一种方法如下所示: http://jsfiddle.net/tu3Pk/2/
在这里,我创建了一个新的 g.arc-labels
元素,其中包含标签, g.arcs
。
function(config){
// ...
var g = svg.selectAll(。arc)
.data ))
.enter()
.append(g)
.attr(class,arc);
g.append(path)
.attr(d,arc)
.style(fill,function(d){
return color(d.data.name);
});
//为标签创建一个新的g
var gLabel = svg.selectAll('。arc-label')
.data(pie(config.data))
.enter()
.append('g')
.attr('class','arc-label');
gLabel.append(text)
.attr(transform,function(d){
returntranslate(+ arc.centroid );
})
.attr(dy,.35em)
.style(text-anchor,middle)
.text (d){return d.data.name;});
// ...
}
但是,这不会帮助很多可读性。要使标签更清晰,您可能需要查看以下问题:防止重叠的文本在D3 在这种情况下,解决方案将在这些行: http:// jsfiddle。 net / tu3Pk / 3 /
//获取弧的角度然后旋转-90度
function getAngle(d){
var ang =(180 / Math.PI *(d.startAngle + d.endAngle)/ 2-90);
return(ang> 180)? 180 - ang:ang;
};
// ...
pie:function(config){
// ...
gLabel .append(text)
.attr(transform,function(d){
returntranslate(+ arc.centroid(d)+)+
rotate (+ getAngle(d)+);
})
.attr(dy,.35em)
.style(text-anchor )
.text(function(d){return d.data.name;});
// ...
}
I'm drawing a pie chart in D3, but having trouble with the text clipping itself:
Here's my draw function:
pie: function(config)
{
var width = config.width || 840,
height = config.height || 520,
radius = Math.min(width, height) / 2;
var color = this._color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.svg.arc().outerRadius(radius - 10).innerRadius(0);
var pie = d3.layout.pie().sort(null).value(function(d) { return d.value; });
var svg = d3.select("body").append("svg").attr('id', config.id || 'chart').attr("width", width).attr("height", height)
.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc").data(pie(config.data)).enter().append("g").attr("class", "arc");
g.append("path").attr("d", arc).style("fill", function(d) { return color(d.data.name); });
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.name; });
return $('#'+(config.id || 'chart'));
},
Is there an easy way to prevent such text clipping?
解决方案 Update: See the answer to D3 put arc labels in a Pie Chart if there is enough space for a more comprehensive answer.
If by avoiding clipping you mean that the <text>
elements should not be occluded by the ensuing arc, then this can be achieved by making the <text>
elements occur after the .arc
elements in the DOM. One way of doing it is shown here: http://jsfiddle.net/tu3Pk/2/
Here, I have created a fresh g.arc-labels
element which contains the labels and appears in the DOM after g.arcs
.
pie: function (config) {
// ...
var g = svg.selectAll(".arc")
.data(pie(config.data))
.enter()
.append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return color(d.data.name);
});
// Creating a new g for labels
var gLabel = svg.selectAll('.arc-label')
.data(pie(config.data))
.enter()
.append('g')
.attr('class', 'arc-label');
gLabel.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.name; });
// ...
}
However, this does not help in legibility much. To make the labels more legible, you might want to take a look at the question: Preventing Overlap of Text in D3 in which case, the solution would be on these lines: http://jsfiddle.net/tu3Pk/3/
// Get the angle on the arc and then rotate by -90 degrees
function getAngle(d) {
var ang = (180 / Math.PI * (d.startAngle + d.endAngle) / 2 - 90);
return (ang > 180) ? 180 - ang : ang;
};
// ...
pie: function (config) {
// ...
gLabel.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ") " +
"rotate(" + getAngle(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.name; });
// ...
}
这篇关于防止D3中的文本剪切(JavaScript图表)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!