D3：更改坐标轴标签的字体大小

Question

我想指定在D3创建的时间轴标签的字体大小。我尝试了这个答案，并使用这个示例代码，但好像没有起作用。我还尝试过：

d3.selectAll(".xAxis>.tick>text")
  .each(function(d, i){
    d3.select(this).style("font-size",30);
  });

没有任何效果。这不可能那么难...

- smcs

---

你链接的小提琴可以正常工作。尝试更改字体大小。 - Lars Kotthoff

哦，既然你这么说了，我在不同的浏览器中尝试了一下。在Chrome中可以正常工作，但在Edge或Firefox中无法正常工作，字体大小完全保持在约15px左右。有什么想法吗？ - smcs

好的，必须指定单位，即使用"60px"而不是仅使用60。 - smcs

Answer 1

事实证明，无单位数字在技术上不是有效的CSS字体大小指示符，并且它是否被忽略取决于浏览器。因此，请使用。

d3.select(this).style("font-size","30px");

代替

d3.select(this).style("font-size",30);

- smcs

Answer 2

使用以下代码可以设置任何X标签的样式

const formatXLabel=()=>{
   const parent = document.querySelector("."+ props.xAxis.class);
   for(let x = 0; x<parent.children.length; x++) {

       const ticks = parent.children.item(x);
       if(ticks !==null && ticks.className.baseVal === 'tick') {
           try {
               const text = ticks.querySelector("text");
               for (let sp in props.xAxis.labelStyles) {
                   text.style[sp.toString()] = props.xAxis.labelStyles[sp];
               }
           }catch (e){
            console.log(e);
           }
       }
   }
}

- dilipkumar katre

---

不过，我觉得这与D3没有任何关系。 - undefined

使用D3渲染图表后，我使用了以下代码来格式化x轴标签。 - undefined