如何使圖表上的d3標題響應？

Question

我有將此代碼片段添加到圖表的代碼片段，如何使其具有響應性？

        d3.select('#chart svg').append('text')
        .attr('x', d3.select('#chart svg').node().getBoundingClientRect().width / 2)
        .attr('y',20)
        .attr('text-anchor', 'middle')
        .style('font-size', '1.4em')
        .style('fill','white')
        .text(item1.chart_title);

這是小提琴： https : //jsfiddle.net/1bxe2scd/1/

Answer 1

附加一個類，並使用媒體查詢讓該類在不同的屏幕尺寸下表現不同：

.attr('class', 'resp-font')

.resp-font {
    //media query for small
    font-size: 12px;

    //media query for large
    font-size: 18px;
}