如何使 d3js 日历及其内容响应

Question

我正在使用这个 d3js 日历 code link，我需要帮助使这个日历的内容在 BS 3 div 中响应。在调整 window 大小后调用重绘不会调整内部图块或日历色块的大小。所以我尝试获取新尺寸并调整大小，但不知道下一步该怎么做...

//I can get the box, and get the aspect ratio
    var contr = d3.select(svg.node().parentnode)
    w = parseInt(svg.style("width "))
    h = parseInt(svg.style("height "))
    aspect = w / h;

同样在 original code 中，我想让单元格和内容响应。 当我查看 d3js 时，我无法获得关于他们如何处理单元格的帮助

//please help me understand how are they deriving the cell size, 
//and can I auto scale the cell size ??
var width = 960,
yearHeight = 136,
height = yearHeight * 20,
cellSize = 17; // cell size

与 BS 3 一起使用时我应该采取额外的预防措施吗？

Answer 1

在使用d3进行响应式设计时，我通常会选择一个值（比如windown.innerWidth）并调整它周围的所有值。例如，以你 link 为例，我将使用：

  var width = window.innerWidth - 30;
      yearHeight = width / 7,
      height = yearHeight * 20,
      cellSize = yearHeight / 8; // cell size

yearHeight / 8 只是来自实验并产生了不错的结果。

然后，下一步是捕获 window 调整大小和 resize/reposition 日历元素：

function resize() {

  var width = window.innerWidth - 30;
      yearHeight = width / 7,
      height = yearHeight * 20,
      cellSize = yearHeight / 8; // cell size

  svg.attr("width", width)  // adjust svg
    .attr("height", height); 

  svg.selectAll(".RdYlGn")  // this is the g element around each year
    .attr("transform", function(d, i) {
      return "translate(" + ((width - cellSize * 53) / 2) + "," + ((yearHeight - cellSize * 7 - 1) + (yearHeight * i)) + ")";
    });

svg.selectAll(".month").attr("d", monthPath); // this is the path around each month

svg.selectAll(".day") // this is each day rect
  .attr("width", cellSize)
  .attr("height", cellSize)
  .attr("x", function(d) {
    d = format.parse(d); // re-parse the date
    return week(d) * cellSize;
  })
  .attr("y", function(d) {
    d = format.parse(d);
    return day(d) * cellSize;
  });
};

这是一个有效的 example。

如何使 d3js 日历及其内容响应

How to make d3js calendar and its contents responsive

responsive-design

d3.js

twitter-bootstrap-3