สมมติว่าฉันมีสคริปต์ฮิสโตแกรมที่สร้างกราฟิก 960 500 svg ฉันจะทำให้การตอบสนองนี้ปรับขนาดความกว้างและความสูงของกราฟิกเป็นแบบไดนามิกได้อย่างไร

<script> 

var n = 10000, // number of trials
    m = 10,    // number of random variables
    data = [];

// Generate an Irwin-Hall distribution.
for (var i = 0; i < n; i++) {
  for (var s = 0, j = 0; j < m; j++) {
    s += Math.random();
  }
  data.push(s);
}

var histogram = d3.layout.histogram()
    (data);

var width = 960,
    height = 500;

var x = d3.scale.ordinal()
    .domain(histogram.map(function(d) { return d.x; }))
    .rangeRoundBands([0, width]);

var y = d3.scale.linear()
    .domain([0, d3.max(histogram.map(function(d) { return d.y; }))])
    .range([0, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("rect")
    .data(histogram)
  .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return height - y(d.y); })
    .attr("height", function(d) { return y(d.y); });

svg.append("line")
    .attr("x1", 0)
    .attr("x2", width)
    .attr("y1", height)
    .attr("y2", height);

</script> 

ตัวอย่างฮิสโทแกรมตัวอย่างทั้งหมดคือ: https://gist.github.com/993912

ไม่มีทางที่จะทำเช่นนี้ที่ไม่ต้อง redrawing กราฟอื่นและมันเกี่ยวข้องกับการปรับเปลี่ยนViewboxและpreserveAspectRatioแอตทริบิวต์ใน<svg>องค์ประกอบ:

<svg id="chart" width="960" height="500"
  viewBox="0 0 960 500"
  preserveAspectRatio="xMidYMid meet">
</svg>

อัปเดต 11/24/15 : เบราว์เซอร์ที่ทันสมัยส่วนใหญ่สามารถอนุมานอัตราส่วนกว้างยาวขององค์ประกอบ SVG จากviewBoxดังนั้นคุณอาจไม่จำเป็นต้องปรับปรุงขนาดของแผนภูมิให้ทันสมัย หากคุณต้องการสนับสนุนเบราว์เซอร์รุ่นเก่าคุณสามารถปรับขนาดองค์ประกอบของคุณได้เมื่อหน้าต่างปรับขนาดดังนี้:

var aspect = width / height,
    chart = d3.select('#chart');
d3.select(window)
  .on("resize", function() {
    var targetWidth = chart.node().getBoundingClientRect().width;
    chart.attr("width", targetWidth);
    chart.attr("height", targetWidth / aspect);
  });

และเนื้อหา svg จะถูกปรับขนาดโดยอัตโนมัติ คุณสามารถดูตัวอย่างการทำงานของสิ่งนี้ (ด้วยการแก้ไขบางอย่าง) ที่นี่ : เพียงปรับขนาดหน้าต่างหรือบานหน้าต่างด้านล่างขวาเพื่อดูว่ามันตอบสนองอย่างไร

มองหา 'responsive SVG' มันค่อนข้างง่ายที่จะทำให้ SVG ตอบสนองและคุณไม่ต้องกังวลเกี่ยวกับขนาดอีกต่อไป

นี่คือวิธีที่ฉันทำ:

d3.select("div#chartId")
   .append("div")
   .classed("svg-container", true) //container class to make it responsive
   .append("svg")
   //responsive SVG needs these 2 attributes and no width and height attr
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 600 400")
   //class to make it responsive
   .classed("svg-content-responsive", true); 

รหัส CSS:

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

ข้อมูลเพิ่มเติม / บทช่วยสอน:

http://demosthenes.info/blog/744/Make-SVG-Responsive

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

ฉันเขียนโค้ดเล็กน้อยเพื่อแก้ปัญหานี้

รูปแบบการแก้ปัญหาทั่วไปคือ:

1. แยกสคริปต์ออกเป็นฟังก์ชันการคำนวณและการวาด
2. ตรวจสอบให้แน่ใจว่าฟังก์ชั่นการวาดดึงแบบไดนามิกและขับเคลื่อนความกว้างของการมองเห็นและตัวแปรความสูง (วิธีที่ดีที่สุดในการทำเช่นนี้คือการใช้ d3.scale api)
3. ผูก / โยงการวาดภาพไปยังองค์ประกอบอ้างอิงในมาร์กอัป (ฉันใช้ jquery สำหรับสิ่งนี้ดังนั้นจึงนำเข้า)
4. อย่าลืมลบมันถ้ามันถูกวาดแล้ว รับมิติจากองค์ประกอบที่อ้างอิงโดยใช้ jquery
5. เชื่อมโยง / โยงฟังก์ชันวาดไปยังฟังก์ชันปรับขนาดหน้าต่าง แนะนำ debounce (หมดเวลา) ในห่วงโซ่นี้เพื่อให้แน่ใจว่าเราจะวาดใหม่หลังจากหมดเวลา

ฉันยังเพิ่มสคริปต์ d3.js แบบย่อสำหรับความเร็ว ส่วนสำคัญอยู่ที่นี่: https://gist.github.com/2414111

jquery รหัสอ้างอิงกลับ:

$(reference).empty()
var width = $(reference).width();

รหัส debounce:

var debounce = function(fn, timeout) 
{
  var timeoutID = -1;
  return function() {
     if (timeoutID > -1) {
        window.clearTimeout(timeoutID);
     }
   timeoutID = window.setTimeout(fn, timeout);
  }
};

var debounced_draw = debounce(function() {
    draw_histogram(div_name, pos_data, neg_data);
  }, 125);

 $(window).resize(debounced_draw);

สนุก!

โดยไม่ต้องใช้ ViewBox

นี่คือตัวอย่างของโซลูชันที่ไม่ต้องพึ่งพาการใช้ viewBox :

กุญแจสำคัญคือในการอัปเดตช่วงของเครื่องชั่งที่ใช้ในการวางข้อมูล

ก่อนอื่นให้คำนวณอัตราส่วนภาพดั้งเดิมของคุณ:

var ratio = width / height;

จากนั้นในการปรับขนาดแต่ละครั้งให้อัพเดตrangeของxและy:

function resize() {
  x.rangeRoundBands([0, window.innerWidth]);
  y.range([0, window.innerWidth / ratio]);
  svg.attr("height", window.innerHeight);
}

โปรดทราบว่าความสูงนั้นขึ้นอยู่กับความกว้างและอัตราส่วนภาพเพื่อให้ได้สัดส่วนเดิมของคุณ

ในที่สุด "วาดใหม่" แผนภูมิ - อัปเดตแอตทริบิวต์ใด ๆ ที่ขึ้นอยู่กับอย่างใดอย่างหนึ่งxหรือyขนาด:

function redraw() {
    rects.attr("width", x.rangeBand())
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y.range()[1] - y(d.y); })
      .attr("height", function(d) { return y(d.y); });
}

โปรดทราบว่าในการปรับขนาดอีกครั้งrectsคุณสามารถใช้ขอบเขตบนของrangeของyแทนที่จะใช้ความสูงอย่างชัดเจน:

.attr("y", function(d) { return y.range()[1] - y(d.y); })

var n = 10000, // number of trials
  m = 10, // number of random variables
  data = [];

// Generate an Irwin-Hall distribution.
for (var i = 0; i < n; i++) {
  for (var s = 0, j = 0; j < m; j++) {
    s += Math.random();
  }
  data.push(s);
}

var histogram = d3.layout.histogram()
  (data);

var width = 960,
  height = 500;

var ratio = width / height;

var x = d3.scale.ordinal()
  .domain(histogram.map(function(d) {
    return d.x;
  }))

var y = d3.scale.linear()
  .domain([0, d3.max(histogram, function(d) {
    return d.y;
  })])

var svg = d3.select("body").append("svg")
  .attr("width", "100%")
  .attr("height", height);

var rects = svg.selectAll("rect").data(histogram);
rects.enter().append("rect");

function redraw() {
  rects.attr("width", x.rangeBand())
    .attr("x", function(d) {
      return x(d.x);
    })
    // .attr("y", function(d) { return height - y(d.y); })
    .attr("y", function(d) {
      return y.range()[1] - y(d.y);
    })
    .attr("height", function(d) {
      return y(d.y);
    });
}

function resize() {
  x.rangeRoundBands([0, window.innerWidth]);
  y.range([0, window.innerWidth / ratio]);
  svg.attr("height", window.innerHeight);
}

d3.select(window).on('resize', function() {
  resize();
  redraw();
})

resize();
redraw();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

หากคุณใช้ d3.js ถึงc3.jsการแก้ปัญหาการตอบสนองค่อนข้างง่าย:

var chart = c3.generate({bindTo:"#chart",...});
chart.resize($("#chart").width(),$("#chart").height());

ตำแหน่งที่ HTML สร้างขึ้นมีลักษณะดังนี้:

<div id="chart">
    <svg>...</svg>
</div>

คำตอบของ Shawn Allen ดีมาก แต่คุณอาจไม่ต้องการทำเช่นนี้ทุกครั้ง หากคุณโฮสต์ไว้ในvida.ioคุณจะได้รับการตอบกลับอัตโนมัติสำหรับการแสดงภาพ svg ของคุณ

คุณสามารถรับ iframe ที่ตอบสนองได้ด้วยโค้ดฝังเรียบง่ายนี้:

<div id="vida-embed">
<iframe src="http://embed.vida.io/documents/9Pst6wmB83BgRZXgx" width="auto" height="525" seamless frameBorder="0" scrolling="no"></iframe>
</div>

#vida-embed iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

http://jsfiddle.net/dnprock/npxp3v9d/1/

การเปิดเผยข้อมูล: ฉันสร้างคุณลักษณะนี้ที่vida.io

ในกรณีที่คุณใช้d3 wrapperเช่นplottable.jsโปรดระวังว่าวิธีแก้ปัญหาที่ง่ายที่สุดอาจเพิ่มผู้ฟังเหตุการณ์แล้วเรียกฟังก์ชันredraw ( redrawใน plottable.js) ในกรณีของ plottable.js วิธีนี้จะใช้ได้ดี (วิธีนี้มีการบันทึกไว้ไม่ดี):

    window.addEventListener("resize", function() {
      table.redraw();
    });

ในกรณีที่ผู้คนยังคงเยี่ยมชมคำถามนี้ - นี่คือสิ่งที่ทำงานให้ฉัน:

• ใส่ iframe ใน div และใช้ css เพื่อเพิ่มการเติม, พูด, 40% ใน div นั้น (เปอร์เซ็นต์ขึ้นอยู่กับอัตราส่วนภาพที่คุณต้องการ) จากนั้นตั้งค่าทั้งความกว้างและความสูงของ iframe เองเป็น 100%

• ในเอกสาร html ที่มีแผนภูมิที่จะโหลดใน iframe ให้ตั้งค่าความกว้างเป็นความกว้างของ div ที่ svg ต่อท้าย (หรือความกว้างของร่างกาย) และตั้งอัตราส่วนความสูงต่อความกว้าง *

• เขียนฟังก์ชันที่โหลดเนื้อหา iframe ใหม่บนหน้าต่างเพื่อปรับขนาดเพื่อปรับขนาดของแผนภูมิเมื่อผู้คนหมุนโทรศัพท์

ตัวอย่างที่นี่ในเว็บไซต์ของฉัน: http://dirkmjk.nl/en/2016/05/embedding-d3js-charts-responsive-website

อัพเดท 30 ธันวาคม 2559

วิธีที่ฉันอธิบายไว้ข้างต้นมีข้อบกพร่องบางประการโดยเฉพาะอย่างยิ่งที่ไม่คำนึงถึงความสูงของชื่อและคำอธิบายภาพที่ไม่ได้เป็นส่วนหนึ่งของ svg ที่สร้างขึ้น D3 ฉันเจอสิ่งที่ฉันคิดว่าเป็นวิธีที่ดีกว่า:

• ตั้งค่าความกว้างของแผนภูมิ D3 เป็นความกว้างของ div ที่แนบมาและใช้อัตราส่วนเพื่อตั้งค่าความสูงตามนั้น
• ให้เพจฝังตัวส่งความสูงและ url ไปยังเพจระดับบนโดยใช้ postMessage ของ HTML5
• ในหน้าหลักใช้ url เพื่อระบุ iframe ที่เกี่ยวข้อง (มีประโยชน์หากคุณมี iframe มากกว่าหนึ่งรายการในหน้าของคุณ) และอัปเดตความสูงเป็นความสูงของหน้าฝังตัว

ตัวอย่างที่นี่ในเว็บไซต์ของฉัน: http://dirkmjk.nl/en/2016/12/embedding-d3js-charts-responsive-website-better-solution

หนึ่งในหลักการพื้นฐานของ D3 data-join คือมันเป็น idempotent กล่าวอีกนัยหนึ่งถ้าคุณประเมิน data-join ด้วยข้อมูลเดียวกันซ้ำ ๆ เอาต์พุตที่สร้างการแสดงผลจะเหมือนกัน ดังนั้นตราบใดที่คุณแสดงแผนภูมิของคุณอย่างถูกต้องคุณต้องระมัดระวังเลือกป้อนอัปเดตและออกจากตัวเลือก - สิ่งที่คุณต้องทำเมื่อมีการเปลี่ยนแปลงขนาดคือแสดงแผนภูมิอีกครั้งอย่างครบถ้วน

มีอีกสองสิ่งที่คุณควรทำอย่างใดอย่างหนึ่งอย่างใดอย่างหนึ่งคือการเด้งกลับหน้าต่างตัวจัดการปรับขนาดเพื่อที่จะเค้นมัน ยิ่งไปกว่านั้นความกว้าง / ความสูงการเขียนโค้ดควรจะทำได้โดยการวัดองค์ประกอบที่มี

อีกทางเลือกหนึ่งนี่คือแผนภูมิของคุณที่แสดงผลโดยใช้d3fcซึ่งเป็นชุดของส่วนประกอบ D3 ที่จัดการการเชื่อมต่อข้อมูลได้อย่างถูกต้อง นอกจากนี้ยังมีแผนภูมิคาร์ทีเซียนที่วัดองค์ประกอบที่มีองค์ประกอบทำให้ง่ายต่อการสร้างแผนภูมิ 'ตอบสนอง':

// create some test data
var data = d3.range(50).map(function(d) {
  return {
    x: d / 4,
    y: Math.sin(d / 4),
    z: Math.cos(d / 4) * 0.7
  };
});

var yExtent = fc.extentLinear()
  .accessors([
    function(d) { return d.y; },
    function(d) { return d.z; }
  ])
  .pad([0.4, 0.4])
  .padUnit('domain');

var xExtent = fc.extentLinear()
  .accessors([function(d) { return d.x; }]);

// create a chart
var chart = fc.chartSvgCartesian(
    d3.scaleLinear(),
    d3.scaleLinear())
  .yDomain(yExtent(data))
  .yLabel('Sine / Cosine')
  .yOrient('left')
  .xDomain(xExtent(data))
  .xLabel('Value')
  .chartLabel('Sine/Cosine Line/Area Chart');

// create a pair of series and some gridlines
var sinLine = fc.seriesSvgLine()
  .crossValue(function(d) { return d.x; })
  .mainValue(function(d) { return d.y; })
  .decorate(function(selection) {
    selection.enter()
      .style('stroke', 'purple');
  });

var cosLine = fc.seriesSvgArea()
  .crossValue(function(d) { return d.x; })
  .mainValue(function(d) { return d.z; })
  .decorate(function(selection) {
    selection.enter()
      .style('fill', 'lightgreen')
      .style('fill-opacity', 0.5);
  });

var gridlines = fc.annotationSvgGridline();

// combine using a multi-series
var multi = fc.seriesSvgMulti()
  .series([gridlines, sinLine, cosLine]);

chart.plotArea(multi);

// render
d3.select('#simple-chart')
  .datum(data)
  .call(chart);

คุณสามารถเห็นมันทำงานใน codepen นี้:

https://codepen.io/ColinEberhardt/pen/dOBvOy

ที่ซึ่งคุณสามารถปรับขนาดหน้าต่างและตรวจสอบว่าแผนภูมิแสดงผลอย่างถูกต้องอีกครั้ง

โปรดทราบว่าฉันเป็นหนึ่งในผู้ดูแลระบบของ d3fc

ฉันจะหลีกเลี่ยงการแก้ปัญหาการปรับขนาด / เห็บเช่นโรคระบาดเนื่องจากพวกเขาไม่มีประสิทธิภาพและอาจทำให้เกิดปัญหาในแอปของคุณ (เช่นคำแนะนำเครื่องมือคำนวณตำแหน่งที่ควรปรากฏในการปรับขนาดหน้าต่างอีกสักครู่หลังจากนั้นแผนภูมิของคุณปรับขนาดด้วย เลย์เอาต์และตอนนี้คำแนะนำเครื่องมือของคุณผิดอีกครั้ง)

คุณสามารถจำลองพฤติกรรมนี้ในเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ IE11 ได้อย่างเหมาะสมเช่นกันโดยใช้<canvas>องค์ประกอบที่รักษามุมมองของมัน

ให้ 960x540 ซึ่งเป็นลักษณะของ 16: 9:

<div style="position: relative">
  <canvas width="16" height="9" style="width: 100%"></canvas>
  <svg viewBox="0 0 960 540" preserveAspectRatio="xMidYMid meet" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-tap-highlight-color: transparent;">
  </svg>
</div>

คำตอบที่ซับซ้อนมากมายที่นี่

โดยพื้นฐานแล้วสิ่งที่คุณต้องทำก็คือทำเครื่องหมายwidthและและheightแอตทริบิวต์ตามที่ต้องการviewBox:

width = 500;
height = 500;

const svg = d3
  .select("#chart")
  .append("svg")
  .attr("viewBox", `0 0 ${width} ${height}`)

หากคุณมีระยะขอบคุณสามารถเพิ่มลงในความกว้าง / ความสูงจากนั้นเพิ่มส่วนต่อท้ายgแล้วแปลงตามที่คุณต้องการ

คุณยังสามารถใช้bootstrap 3เพื่อปรับขนาดการสร้างภาพ ตัวอย่างเช่นเราสามารถตั้งค่าโค้ด HTMLเป็น:

<div class="container>
<div class="row">

<div class='col-sm-6 col-md-4' id="month-view" style="height:345px;">
<div id ="responsivetext">Something to write</div>
</div>

</div>
</div>

ฉันตั้งค่าความสูงคงที่เนื่องจากความต้องการของฉัน แต่คุณสามารถออกจากขนาดอัตโนมัติได้เช่นกัน "col-sm-6 col-md-4" ทำให้ div ตอบสนองสำหรับอุปกรณ์ต่าง ๆ คุณสามารถเรียนรู้เพิ่มเติมได้ที่http://getbootstrap.com/css/#grid-example-basic

เราสามารถเข้าถึงกราฟด้วยความช่วยเหลือของประชาชนได้เดือนมุมมอง

ฉันจะไม่ลงรายละเอียดมากนักเกี่ยวกับรหัส d3 ฉันจะป้อนเฉพาะส่วนที่จำเป็นสำหรับการปรับให้เหมาะกับขนาดหน้าจอที่แตกต่างกัน

var width = document.getElementById('month-view').offsetWidth;

var height = document.getElementById('month-view').offsetHeight - document.getElementById('responsivetext2').offsetHeight;

ความกว้างถูกกำหนดโดยรับความกว้างของ div ด้วยมุมมองเดือน id

ความสูงในกรณีของฉันไม่ควรรวมพื้นที่ทั้งหมด ฉันยังมีข้อความอยู่เหนือแถบดังนั้นฉันจึงต้องคำนวณพื้นที่นั้นด้วย นั่นเป็นเหตุผลที่ฉันระบุพื้นที่ของข้อความด้วย id responsivetext สำหรับการคำนวณความสูงที่อนุญาตของแถบฉันจะลบความสูงของข้อความจากความสูงของ div

สิ่งนี้ช่วยให้คุณมีแถบที่จะปรับขนาดหน้าจอ / div ที่แตกต่างกันทั้งหมด มันอาจไม่ใช่วิธีที่ดีที่สุดในการทำ แต่มันก็ใช้ได้ผลกับความต้องการของโครงการของฉัน