Question

我有一个新问题。 D3可以画出这个： http://www.nytimes.com/interactive/2008/05/03/business/20080403_SPENDING_GRAPHIC.html?_r=0 在d3中使用voronoi功能？我在想的是一个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来掩盖它。要么应该工作。

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

1 个答案: