この例をグラフ作成の基本として使用しました: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軸が完全に縮小されますが、テキストは以前と同じ大きさです。高さ/幅が低くなったり高くなったりする場合、どうすれば縮小できますか?
フォントサイズを変更するには、メディアクエリを使用する必要があります。メディアクエリがどのように機能するかについての優れたリソースは次のとおりです。http://css-tricks.com/css-media-queries/
そして、これがあなたがそれをどのように使うかの例です:
@media all and (max-width: 200px) {
body {
font-size:10px;
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加