Question

我正在努力使我的d3多系列折线图响应于此reference，而here是此参考的完整代码。

我将以下resize功能添加到my code的底部：

$(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

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

这里的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（＆＃34; DEFS＆＃34） .append（＆＃34; clipPath＆＃34） .attr（＆＃34; id＆＃34;，＆＃34; clip＆＃34;） .append（＆＃34; RECT＆＃34） .attr（＆＃34; width＆＃34;，main_width） .attr（＆＃34; height＆＃34;，main_height）;

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

.attr('class', "brushrect")

迷你线的class更改为mini_line0和mini_line4，其中一些代码有一些与此相关的微小更新。

然后全部完成。

调整响应d3的功能

1 个答案: