it-swarm.dev

استمرار الرسم البياني D3

لدي هذا المخطط 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>
54
TechyDude

يمكنك تغيير حجم المخطط باستخدام مزيج من السمتين viewBox و preserveAspectRatio في عنصر SVG.

راجع jsfiddle للحصول على المثال الكامل: http://jsfiddle.net/BTfmH/12/

var svg = d3.select('.chart-container').append("svg")
    .attr("width", '100%')
    .attr("height", '100%')
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
    .attr('preserveAspectRatio','xMinYMin')
    .append("g")
    .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");

لن تحتاج حتى إلى معالج resize بهذه الطريقة.

123
Sam Sehnert

يمكنك استخدام window.innerWidth و window.innerHeight للحصول على أبعاد الشاشة وإعداد الرسم البياني الخاص بك وفقًا لذلك ، على سبيل المثال.

var width = window.innerWidth,
    height = window.innerHeight,
    innerRadius = Math.min(width,height)/3,
    outerRadius = innerRadius + 30;
6
Lars Kotthoff