Question

在这个jsbin中我得到了这样的可用宽度：

  getDimensions() {
    const minWidth = window.innerWidth;

    const margin = {
      top: 20,
      right: 50,
      left: 50,
      bottom: 50
    };

    const width = minWidth - margin.left - margin.right;

    const height = window.innerHeight - margin.top - margin.bottom;

    return {
      margin,
      width,
      height
    };
  }

然后我用它来设置svg element的宽度：

const el = this.refs.sine;

const dimensions = this.getDimensions();

const xScale = d3.scale.linear()
        .domain([0, 20])
        .range([0, dimensions.width]);

const yScale = d3.scale.linear()
        .domain([0, 20])
        .range([dimensions.height, 0]);

const svg = d3.select(el).append("svg")
  .attr("width", dimensions.width)
  .attr("height", dimensions.height);

它在桌面上抓取可用的宽度和高度，但在移动设备中却没有。

有人可以为responsive layout建议svg的更好方法吗？

Answer 1

在这种情况下width/height计算图表ID的父el，或者您可以直接计算body的宽度/高度。以下是使用jquery：

执行此操作的示例

  var containerWidth = $("#el").parent().width();
  var containerheight = $("#el").parent().height();
  var margin = {top: 15, right: 30, bottom: 40, left:40},
      width = containerWidth- margin.left - margin.right,
      height = containerheight - margin.top - margin.bottom;

在d3.js中获取svg可用维度的最佳方法

1 个答案: