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

Question

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

所以刻度标签看起来像这样：

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

我还没有找到解决方案。有可能吗？如果是，怎么样？

Answer 1

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

在这个例子中，我只是简单地检查哪个轴节点解析为一个数字，这只是年值：

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

然后是＆＃39;年＆＃39; css类可以应用你想要的任何额外样式。

＆＃13;

＆＃13;

//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");
  }
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;