61

私はこの D3 チャートを持っています - ほとんどそのままです。応答性を高め、幅と高さの変数、innerRadius、outerRadius にパーセンテージを使用する方法はありますか? 私はレスポンシブ サイトで作業しており、画面サイズ/ブラウザー サイズに基づいて変更する必要があります。

jsfiddle はこちら: http://jsfiddle.net/BTfmH/1/

コード：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html,
body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

.chart-container {
/*  width:50%;
  height:50%;*/
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
  var width = 350,
      height = 350,
      τ = 2 * Math.PI;

  var arc = d3.svg.arc()
      .innerRadius(100)
      .outerRadius(135)
      .startAngle(0);

var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

  var background = svg.append("path")
      .datum({endAngle: τ})
      .style("fill", "green")
      .attr("d", arc);

  var foreground = svg.append("path")
    .datum({endAngle: .127 * τ})
      .style("fill", "grey")
      .attr("d", arc);

setInterval(function() {
  foreground.transition()
      .duration(750)
      .call(arcTween, Math.random() * τ);
}, 1500);

  function arcTween(transition, newAngle) {

    transition.attrTween("d", function(d) {

      var interpolate = d3.interpolate(d.endAngle, newAngle);

      return function(t) {

        d.endAngle = interpolate(t);

        return arc(d);
      };
    });
}
</script>
4

2 に答える 2

6

とを使用window.innerWidthしwindow.innerHeightて、画面の寸法を取得し、それに応じてグラフを設定できます。

var width = window.innerWidth,
    height = window.innerHeight,
    innerRadius = Math.min(width,height)/3,
    outerRadius = innerRadius + 30;
于 2013-07-13T14:26:35.880 に答える