d3.js中轴刻度标签的样式

Style of axis tick labels in d3.js

本文关键字：标签 样式 js d3      更新时间：2023-09-26

下面的脚本创建一个带有三个标签和一个标题的点刻度轴。body css选择器定义body中所有文本元素的字体族和字体大小。虽然轴标题受css规则的影响，但轴刻度标签不受影响，尽管它们本身就是文本元素。我知道我可以使用。axis文本选择器设置刻度标签样式。也许我在这里遗漏了一些明显的东西，但是是什么阻止了标记标签与主体选择器一起呈现?

代码如下:

<!doctype html>
<meta charset="utf-8">
<script src="d3.min.V4.js"></script>
<style>
body {
  font-family: Courier;
  font-size: 18px;
}
</style>
<body>
</body>
<script>
var margin = {top: 20, right: 60, bottom: 40, left: 70},
    width = 600,
    height = 100;
var svg = d3.select('body').append('svg')
                       .attr('width', width)
                       .attr('height', height);
var xScale = d3.scalePoint().domain(["blue", "red", "green"]).range([margin.left, width-margin.right]);
// Add the x Axis
 svg.append("g")
     .attr("transform", "translate(0," + (height - margin.bottom) + ")")
     .attr("class", "axis")
   .call(d3.axisBottom(xScale)
     );
//x axis title
svg.append('text')
   .text('Colors')
   .attr('x', width/2)
   .attr('y', height - 5)
   .style("text-anchor", "middle");

</script>

正如Gerardo所提到的，API将以默认填充#000进行绘制。一种解决方法是重新选择文本并重新设置样式。它看起来像这样:

var xScale = d3.scalePoint().domain(["blue", "red", "green"]).range([margin.left, width-margin.right]);
// Add the x Axis
var xTicks = svg.append("g")
     .attr("transform", "translate(0," + (height - margin.bottom) + ")")
     .attr("class", "axis")
   .call(d3.axisBottom(xScale)
     );
xTicks.selectAll('text').attr('fill', function(d){
    return d;
  });

根据API，轴生成器自动设置容器g元素中的刻度的字体大小和字体族，这是默认样式(代码复制自API的示例):

//styles applied to the outer g element:
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
    <path class="domain" stroke="#000" d="M0.5,6V0.5H880.5V6"></path>
    <g class="tick" opacity="1" transform="translate(0,0)">
        <line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
        <text fill="#000" y="9" x="0.5" dy="0.71em">0.0</text>
    </g>
    //etc...
</g>

因此，似乎由于特异性和优先级规则，这种样式优于您的body CSS样式。

要更改刻度，您必须在CSS中指定text(或使用类或ID)。

相关文章：