如何使图表上的 d3 标题响应式

How to make d3 title on a chart responsive?

本文关键字：标题 响应 d3 何使图      更新时间：2023-09-26

我有这个代码片段，可以为图表添加标题，如何使其响应？

        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/

使用媒体查询附加一个类，并使该类针对不同的屏幕大小具有不同的行为：

.attr('class', 'resp-font')
.resp-font {
    //media query for small
    font-size: 12px;
    //media query for large
    font-size: 18px;
}
相关文章：