如何使图表上的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;
}