d3.js - d3 可以在形状内构建形状吗？

Question

我有一个新问题。 D3可以画这个吗:
http://www.nytimes.com/interactive/2008/05/03/business/20080403_SPENDING_GRAPHIC.html?_r=0
在 d3 中使用 voronoi 函数？我在想的是一个 svg，它的行为类似于 a 并绑定(bind)在这里找到的 voronoi http://bl.ocks.org/mbostock/4060366到一个圆圈。 《纽约时报》已经使用 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 来掩盖它。要么应该工作。