D3.js - 如何在一个图中使用不同样式的刻度标签？

Question

我正在使用d3.js来绘制数据.在x轴上,我有各种范围的时间.

因此,刻度标签看起来像这样:

我想强调这些年份,所以我希望年份标签大胆,而数月则不会大胆.

我还没有找到解决方案.有可能吗？如果有,怎么样？

Answer 1

使用.callto轴组件创建轴svg节点后,您可以返回并选择特定的文本节点以更改其样式.

在这个例子中,我只是检查哪个轴节点解析为一个数字,这只是年值:

axisNodes.selectAll('text').each(function() {
  if(+this.textContent) {
    this.classList.add("year");
  }
});

然后'year'css类可以应用你想要的任何额外样式.

//adapted from http://bl.ocks.org/mbostock/4149176
var margin = {top: 250, right: 40, bottom: 250, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .domain([new Date(2012, 0, 1), new Date(2013, 0, 1)])
    .range([0, width]);

var xAxis = d3.svg.axis()
    .scale(x);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)

var axisNodes = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(20,50)")
    .call(xAxis);

axisNodes.selectAll('text').each(function() {
  if(+this.textContent) {
    this.classList.add("year");
  }
});

.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.year {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>