d3可以在一个形状内建立形状吗？

我有一个新问题。 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绑定到一个圆圈。纽约时报使用闪光灯完成了上述可视化。任何想法？我曾尝试创建一个大圆圈并嵌入小圆圈，但voronoi不显示，并且点不限于外圈。代码生成：d3可以在一个形状内建立形状吗？

 <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);

非常感谢！

来源

2013-07-03 Mr. Concolato

你所引用的是一个voronoi树图 - 对Michael Balzer和Oliver Deussen提出的标准矩形树图提供了一个相当不错的改进。我目前正在研究如何使用d3完成这项工作，所以如果你成功了，请分享:) – ThomasP85

你有没有想过这个？如果是这样，你愿意分享你的解决方案代码吗？我正在尝试制作类似的可视化文件，并且无法使用d3来实现它。 – punkrockpolly

不是真的，但不是由于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-03 21:17:21 ckersch

我同意。我只想看看我是否会错过一些东西。 –

d3可以在一个形状内建立形状吗？

回答

相关问题