以下脚本创建带有三个标签和一个标题的点比例轴。正文css选择器定义了正文中所有文本元素的字体系列和字体大小。虽然轴标题受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>
根据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>
因此，由于特殊性和优先级规则，这种样式似乎优先于您的bodyCSS样式。
要更改刻度，您必须text在CSS中指定（或使用类或ID）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句