如何制作响应式D3 Sankey图

I am using a chart of D3 Sankey but I want to make it responsive please can anyone help me to make it responsive...

我正在使用D3 Sankey的图表,但我想让它响应,请任何人帮助我使其响应...

this is the jQuery code of the Sankey chart

这是Sankey图表的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';
}

this is the sankey chart shown in image

这是图像中显示的sankey图表

1 个解决方案

#1

I think this

我认为这

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") ;

should work for you. Set your svg's width & height to be '100%' and include the preserveAspectRatio as well.

应该适合你。将svg的宽度和高度设置为“100%”,并包含preserveAspectRatio。

#1