Question

我是D3的新手，正在测试一些D3程序。当窗口大小增加或减少时，我需要缩放矩形的宽度。截至目前，我不知道函数widthScale中的内容。

＆＃13;

var width = window.innerWidth;
var svg = d3.select('body')
  .append("svg");

var _data = ["apple", "banana", "carrots", "grapes"];

var rects = svg.selectAll('rect')
  .data(_data).enter();

var xScale = d3.scale.ordinal()
  .domain(_data)
  .rangePoints([10, 200]);

var widthScale = d3.scale.linear() // I do not know what to do here so that I can get the rect to increase the width when window scales
  .domain([0])
  .range([0]);

rects.append('rect')
  .attr({
    "x": function(d) {
      return xScale(d);
    },
    "y": 15,
    "width": 50, // the width needs to scale when the window size increases or decreases and leave a little space in between each.
    //"width" : widthScale(something), //This is what i want
    "height": 15
  });

＆＃13;

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

＆＃13;

Answer 1

有不同的方法来创建这样的响应式SVG，但我会尽量保留你的大部分代码。

我的方法是在xScale中使用func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { return Your_View.frame.height Or Others }，而不是rabgeBands：

rangePoints

所以，每次var xScale = d3.scale.ordinal() .domain(_data) .rangeBands([10, width - 10]);更改时（下面会有更多内容），我们都会有一个新的width，我们只是将其用于矩形的宽度：

scale.rangeBand()

这里的幻数0.95（95％）只是一个填充。

在这些更改之后，我们将所有内容转储到rects.attr({ "x": function(d) { return xScale(d); }, "y": 15, "width": xScale.rangeBand() * 0.95, "height": 20 });函数中，我们在调整窗口大小时调用它：

draw

在d3.select(window).on("resize", draw);内，我们得到新的窗口宽度...

draw

...并使用该值更改比例域和SVG宽度。

这是一个演示：

width = window.innerWidth;

var width = window.innerWidth;

var colors = d3.scale.category10();

var svg = d3.select('body')
  .append("svg")
  .attr("height", 100)
  .attr("width", width);

var _data = ["apple", "banana", "carrots", "grapes"];

var rects = svg.selectAll('rect')
  .data(_data)
  .enter()
  .append('rect')
  .attr("fill", function(d, i) {
    return colors(i);
  });

draw();

d3.select(window).on("resize", draw);

function draw() {

  width = window.innerWidth;

  svg.attr("width", width)

  var xScale = d3.scale.ordinal()
    .domain(_data)
    .rangeBands([10, width - 10]);

  rects.attr({
    "x": function(d) {
      return xScale(d);
    },
    "y": 15,
    "width": xScale.rangeBand() * 0.95,
    "height": 20
  });

}

以下是小提琴中的相同代码，更容易调整大小：https://jsfiddle.net/oav639xj/

d3根据窗口大小缩放矩形宽度

1 个答案: