5

我有一个新问题。 D3 可以使用 d3 中的 voronoi 函数绘制这个： http ://www.nytimes.com/interactive/2008/05/03/business/20080403_SPENDING_GRAPHIC.html?_r=0 吗？我在想的是一个 svg，它的行为类似于 a 并将此处找到的 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);

非常感谢！

4

1 回答 1

2

不是真的，但不是因为 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 来掩盖它。要么应该工作。

于 2013-07-03T21:17:21.440 回答