如何在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; 
    } 
}