如何在d3js圖形上與圖形一起製作文字？

Question

我用這個例子作爲基本我圖作成：http://bl.ocks.org/weiglemc/6185069

在我的圖表x軸我添加一些文字：

svg.append("g") 
.attr("class", "x axis") 
.attr("transform", "translate(0," + height + ")") 
.call(xAxis) 
.append("text") 
.attr("class", "label") 
.attr("x", width) 
.attr("y", -6) 
.style("text-anchor", "end") 
.text("Calories"); 

一切工作正常，但現在我也想創建的這個縮小版圖形，就像200x200像素，當我改變高度和寬度x和y軸完全縮小，但我的文本仍然像以前一樣大。當高度/寬度越來越低時，我該如何縮小它？

Answer 1

您將不得不使用媒體查詢來更改字體大小。下面是媒體查詢是如何工作的一個很好的資源：http://css-tricks.com/css-media-queries/

而這裏的你將如何使用它的一個例子：

@media all and (max-width: 200px) { 
    body { 
    font-size:10px; 
    } 
}