d3可以在形状内构建形状吗？

Question

我有一个新问题.D3可以 使用d3中的voronoi函数绘制这个:http: //www.nytimes.com/interactive/2008/05/03/business/20080403_SPENDING_GRAPHIC.html？_ r = 0？我在想的是一个svg,表现得像一个并且将这里发现的voronoi绑定到一个圆圈http://bl.ocks.org/mbostock/4060366.NY Times使用flash完成了上述可视化.有任何想法吗？我尝试创建一个大圆圈并嵌入较小的圆圈,但是voronoi没有显示出来,并且这些点并不局限于外圈.代码生成:

        <svg class="PiYG" width="560" height="570">
    <circle cx="270" cy="300" r="260" style="stroke: rgb(0, 0, 0);">
    <g>

我的js代码看起来像这样:

 var width = 560, height = 570;
var svg = d3.select("#VD1").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "PiYG");


var path = svg.append("circle")
        .attr("cx", 270)
        .attr("cy", 300)
        .attr("r", 260)
        .style("stroke", "#000")
        .append("g")
        .selectAll("path"); 

var vertices = d3.range(count).map(function(d) {
  return [Math.random() * width, Math.random() * height];
});
var voronoi = d3.geom.voronoi()
    .clipExtent([[0, 0], [width, height]]);

svg.selectAll("circle")
    .data(vertices.slice(2))
  .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 2);

非常感谢!

Answer 1

并非如此，但这并不是因为 d3 的任何缺点，而是因为这不是 Voronoi 函数的作用。Voronoi 函数根据图表中最接近给定点的区域来构建线。它不是按比例将圆分成更小的部分（其大小与数据相对应）的方法。

话虽如此，创建圆形 Voronoi 图绝对是可能的。为此，您必须对示例 Voronoi 图代码进行一些更改。

首先，您必须确保所有点都位于一个圆内。在您的示例中，点位置由 给出d，此处：

.attr("transform", function(d) { return "translate(" + d + ")"; })

（d您的数据集）需要适合圆圈，或者您需要对其进行一些转换。对于在两个维度上归一化为 (-1,1) 的数据，函数

.attr("transform", function(d) { return "translate([" +
    d[0]*Math.sqrt(1 - Math.pow(d[1],2)/2) 
    + "," +
    d[1]*Math.sqrt(1 - Math.pow(d[0],2)/2)
    + "])"; })

会这样做。在这里，我们创建了一个新数组，该数组将被最初在 中的数组中的一个圆所包围d。

接下来，您需要将 Voronoi 图裁剪为包含在一个圆圈内。有趣的是，没有内置的“圆形”几何对象可供剪辑，因此您需要发挥创意！要么构建自定义方法来执行此操作，要么让 Voronoi 扩展到您的圈子之外并构建 SVG 来覆盖它。两者都应该有效。