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可以在一個形狀內建立形狀嗎？

回答

相關問題