响应式 d3 的调整大小功能

Question

我正在尝试使我的 d3 多系列折线图响应以下 reference and here 是此参考的完整代码。

我在my code的底部添加了下面的resize函数：

$(window).on("resize", function() {

    //update width
    var main_width = parseInt(d3.select('#myChart').style('width'), 10);
    main_width = main_width - main_margin.left - main_margin.right;

    //resize the chart
    main_x.range([0, main_width]);
    mini_x.range([0, main_width]);

    d3.select('#myChart').append("svg")
    .attr("width", main_width + main_margin.left + main_margin.right)
    .attr("height", main_height + main_margin.top + main_margin.bottom);

    svg.selectAll('defs.clipPath.rect')
    .attr("width", main_width);

    svg.selectAll('rect.overlay')
    .attr("width", main_width);

}).trigger("resize");

但是当我调整屏幕时没有任何改变。不知道为什么，请指教！非常感谢。

Answer 1

只需检测所有与宽度有关的 svg 元素和属性 main_width，因为响应式意味着宽度会在屏幕调整大小时进行调整。

这里是运行良好的 resize() 函数：

//----------- responsive d3, resize functionality -----------
$(window).on("resize", function() {

  //update width
  main_width = parseInt(d3.select('#myChart').style('width'), 10);
  main_width = main_width - main_margin.left - main_margin.right;

  //resize main and min time axis range
  main_x.range([0, main_width]);
  mini_x.range([0, main_width]);

  //pointpoint the 'rect' element about brush functionality and adjust its width
  svg.selectAll('rect.brushrect').attr("width", main_width);

  //pinpoint the 'rect' element about mousemove and adjust its width
  svg.selectAll('rect.overlay').attr("width", main_width);

  //update x axis
  svg.selectAll("g.x.axis").transition().call(main_xAxis);

  //update right y axis
  svg.selectAll('g.y.axisRight').attr("transform", "translate(" + main_width + ", 0)").call(main_yAxisRight);

  // update main line0 and line4
  svg.selectAll("path.line.line0").datum(data).transition().attr("d", main_line0);
  svg.selectAll("path.line.line4").datum(data).transition().attr("d", main_line4);

  //update min line0 and line4
  mini.selectAll("path.mini_line0").datum(data).transition().attr("d", mini_line0);
  mini.selectAll("path.mini_line4").datum(data).transition().attr("d", mini_line4);

}).trigger("resize");

注意两点

关于刷的rect属性，即

svg.append("defs") .append("clipPath") .attr("id", "clip") .append("rect") .attr("width", main_width) .attr("height", main_height);

没有 name，因此应添加以下 class 属性以进行精确定位：

.attr('class', "brushrect")

迷你线路的class改为mini_line0和mini_line4，一些代码有一些与之相关的小更新。

然后全部完成。

响应式 d3 的调整大小功能

Resize function for responsive d3

javascript

d3.js

svg

data-visualization