調整響應d3的函數大小

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（」 DEFS 「） .append（」 clipPath 「） .attr（」 ID」， 「剪輯」） .append（ 「矩形」） .attr（ 「寬度」，main_width） .attr（ 「高度」，main_height）;

沒有名，所以下面class屬性應查明添加：

.attr('class', "brushrect") 

• 的class迷你線改爲mini_line0和mini_line4，一些碼有相關的一些微小的更新。

然後全部完成。