Question

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

//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）并调整其周围的所有值。例如，通过您链接的示例，我使用：

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

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

然后，下一步是抓住窗口调整大小并调整日历元素的大小/重新定位：

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日历及其内容响应

1 个答案: