如何制作響應式D3 Sankey圖

Question

我正在使用D3 Sankey的圖表，但我想使其響應，請有人可以幫助我使其響應...

這是Sankey chart的jQuery代碼

Sankey = (function() {
function Sankey() {
  this.display_in_element = 'sankey';
  this.display_width = $("#" + this.display_in_element).width();
  this.display_height = $("#" + this.display_in_element).height();
  this.r = Raphael(this.display_in_element, this.display_width, this.display_height);
  this.left_margin = 100;
  this.right_margin = 100;
  this.y_space = 10;
  this.threshold_for_drawing = 0;
  this.box_width = 50;
  this.flow_edge_width = 2;
  this.flow_curve = 0.25;
  this.boxes = {};
  this.box_array = [];
  this.lines = {};
  this.line_array = [];
  this.stacks = [];
  this.bubbles = [];
  this.bubbleColor = '#000';
  this.bubbleLabelColor = '#fff';
  this.opacity = '1.0';
  this.opacity_highlight = '0.1';
}

這是圖像中顯示的sankey圖表

Answer 1

我認為這

var svg = d3.select('#your-graph-div-id').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") ;

應該為您工作。 將您的svg的寬度和高度設置為“ 100％”，並同時包含prepareAspectRatio。