调整响应d3的大小功能

Resize function for responsive d3

本文关键字：功能 响应 d3 调整      更新时间：2023-09-26

我正试图使我的d3多系列折线图响应以下参考，这里是这个参考的完整代码。

我将以下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");

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

只是检测所有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("def").append("clipPath").attr("id","剪辑").append("矩形").attr("宽度",main_width).attr("高度",main_height);

没有名称，因此应该添加以下class属性以进行精确定位:

.attr('class', "brushrect")

  • 迷你线的class改为mini_line0和mini_line4，一些代码有一些微小的更新。
相关文章：