以下脚本创建了一个带有三个标签和一个标题的点刻度轴。主体 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>
最佳答案
正如 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;
});
关于javascript - d3.js 中轴刻度标签的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40555539/