Question

以下脚本创建一个带有三个标签和一个标题的点刻度轴。 body css选择器定义正文中所有文本元素的font-family和font-size。虽然轴标题受css规则的影响，但轴刻度标签不是，尽管它们本身是文本元素。我知道我可以使用.axis文本选择器设置tick标签样式。也许我错过了一些明显的东西，但是什么阻止了用身体选择器渲染刻度标签？

以下是代码：

<!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>

Answer 1

根据API，轴生成器自动设置容器g元素中刻度的font-size和font-family，这是默认样式（从API＆复制的代码）＃39; s例子）：

//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）。

Answer 2

正如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;
  });

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

2 个答案: