使用d3雲動態調整大小的字雲

Question

我通過修改以下代碼創建wordcloud：https://github.com/jasondavies/d3-cloud。我可以通過修改w & h來更改大小，但是我想在瀏覽器窗口更改時擴展單詞雲。什麼是實現這一目標的一個js小白

代碼張貼於http://plnkr.co/edit/AZIi1gFuq1Vdt06VIETn?p=preview

<script> 

myArray = [{"text":"First","size":15},{"text":"Not","size":29},{"text":"Bird","size":80}, {"text":"Hello","size":40},{"text":"Word","size":76},{"text":"Marketplaces","size":75}] 
var fillColor = d3.scale.category20b(); 
var w = 400, // if you modify this also modify .append("g") .attr -- as half of this 
    h = 600; 

d3.layout.cloud().size([w, h]) 
    .words(myArray) // from list.js 
    .padding(5) 
    .rotate(0)  
    .font("Impact") 
    .fontSize(function(d) { return d.size; }) 
    .on("end", drawCloud) 
    .start(); 

function drawCloud(words) { 
d3.select("body").append("svg") 
    .attr("width", w) 
    .attr("height", h) 
    .append("g") 
    .attr("transform", "translate(" + w/2 + "," + h/2 + ")") 
    .selectAll("text") 
    .data(words) 
    .enter().append("text") 
    .style("font-size", function(d) { return (d.size) + "px"; }) 
    .style("font-family", "Impact") 
    .style("fill", function(d, i) { return fillColor(i); }) 
    .attr("text-anchor", "middle") 
    .attr("transform", function(d,i) { 
      return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
     } 
    ) 
    .text(function(d) { return d.text; }); 
} 
</script> 

Answer 1

解決方案＃1的最佳方法：

在第37行：

.style("font-size", function(d) { return (d.size) + "px"; }) 

替換

.style("font-size", function(d) { return (d.size/3) + "vh"; }) // "d.size/3" is an assumption use your appropriate relative width or height. 

而不是使用px使用vw這是查看端口寬度。這是一個css3功能，將根據視口調整文本的大小。但是，您需要適當調整真實的寬度和高度。

嘗試閱讀這篇文章：http://css-tricks.com/viewport-sized-typography/

解決方案2：

在第37行：

.style("font-size", function(d) { return (d.size) + "px"; }) 

使用

.attr("class", nameOfClass) // use class names here like 'big-font', 'med-font', 'small-font' 

，並在CSS定義的樣式使用媒體查詢，cla如果（d.size> 10）nameOfClass =「big-font」等，sses將根據條件中的d.size進行分配。

而不是使用JS給單詞寬度和高度，分配類給他們使用媒體查詢斷點。

閱讀：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

我建議的解決方案2作爲我相信vw和vh並不被所有的瀏覽器都支持。 http://caniuse.com/#feat=viewport-units。有一些相關報道的問題。

Answer 2

解決方案3：

計算字體大小，你必須創建這個規模：

var fontSizeScale = d3.scale.pow().exponent(5).domain([0,1]).range([ minFont, maxFont]); 

，並調用它在fontSize功能：

var maxSize = d3.max(that.data, function (d) {return d.size;}); 

.fontSize(function (d) { 
     return fontSizeScale(d.size/maxSize); 
     }) 

---

爲了適合您的屏幕/ div的邊界：

在 .on("end", drawCloud)功能

，調用此函數：

function zoomToFitBounds() { 

     var X0 = d3.min(words, function (d) { 
     return d.x - (d.width/2); 
     }), 
     X1 = d3.max(words, function (d) { 
      return d.x + (d.width/2); 
     }); 

     var Y0 = d3.min(words, function (d) { 
      return d.y - (d.height/2); 
     }), 
     Y1 = d3.max(words, function (d) { 
      return d.y + (d.height/2); 
     }); 

     var scaleX = (X1 - X0)/(width); 
     var scaleY = (Y1 - Y0)/(height); 

     var scale = 1/Math.max(scaleX, scaleY); 

     var translateX = Math.abs(X0) * scale; 
     var translateY = Math.abs(Y0) * scale; 

     cloud.attr("transform", "translate(" + 
     translateX + "," + translateY + ")" + 
     " scale(" + scale + ")"); 
}