我看过 D3.js 的示例- Voronoi Tessellation .但是我想在每个多边形而不是圆中放置一些文本,这是我的js代码:
var width = 600, height = 400;
var vertices = d3.range(20).map(function(d){
return [Math.random() * width, Math.random() * height]
});
var voronoi = d3.geom.voronoi();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
path = svg.append("g").selectAll("path");
svg.selectAll("info")
.data(vertices.slice(1))
.enter().append("text")
.attr("transform", function(d) {
return "translate(" + d + ")";
})
.text("someText")
.attr("shape-rendering","crispEdges")
.style("text-anchor","middle");
redraw();
function redraw(){
path = path
.data(voronoi(vertices), polygon);
path.exit().remove();
path.enter().append("path")
.attr("class", function(d, i) {return "q" + (i % 9) + "-9";})
.attr("d", polygon);
path.order();
}
function polygon(d){
return "M" + d.join("L") + "Z";
}
我这里有一个用于该基本示例的 JSFiddle: my voronoi code
现在,我希望每个多边形的文本都位于多边形的中心,并且不要与多边形的边界交叉。如果多边形没有足够的空间来包含所有文本,只包含它的第一部分! 如果我能做些什么来解决这个问题,请告诉我,谢谢!
PS:真对不起我的英文,是的,太烂了! :)
最佳答案
看看这个例子http://bl.ocks.org/mbostock/6909318 ,您可能希望将文本放置在多边形质心处,而不是用于确定 voronoi 镶嵌的种子(点)。
这应该可以解决大部分布局问题。
自动缩放文本以适应有点困难,如果您愿意缩放和旋转文本,您可以使用类似于以下的技术来确定该点的线的长度:
https://mathoverflow.net/questions/116418/find-longest-segment-through-centroid-of-2d-convex-polygon
然后你需要确定线的角度。我有一个插件可以帮助解决这个问题: http://bl.ocks.org/stephen101/7640188/3ffe0c5dbb040f785b91687640a893bae07e36c3
最后,您需要缩放和旋转文本以适应。要确定文本的宽度,请在文本元素上使用 getBBox():
var text = svg.append("svg:text")
.attr("x", 480)
.attr("y", 250)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("font", "300 128px Helvetica Neue")
.text("Hello, getBBox!");
var bbox = text.node().getBBox();
然后使用之前计算的角度来缩放和旋转文本:
text.attr("transform", "rotate(40) scale(7)")
我很乐意给出一个完整的示例,但要做到这一点需要大量的工作。
还有其他选项可以实现相同的效果,但没有一个是简单的(即您可以像 d3 处理 Sankey 布局那样对布局进行退火处理)
关于d3.js - 如何用D3.js限制Voronoi图中多边形的文字?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19511917/