样式轴文本：这是最好的（或唯一的）方法吗？

Question

我想设置轴日期/时间文字的样式，以使日间休息更加突出。

基于一堆QAs，我想出了下面的功能。我正在研究基于Brush & Zoom example的时间轴，所以我在每个画笔和缩放事件上调用此函数。

时间表仍然有效，但我想知道是否有更有效的方法来做到这一点。我很久没有使用d3（或JS），所以我有时仍在将事情拼凑在一起而没有完全理解发生了什么以及可能导致什么后果。

function styleAxis() {
    d3.selectAll('g.tick')
        .select('text')
        .style('fill', function (d) {
            var txt = d3.select(this).text().split(" ");
            var days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

            if (days.indexOf(txt[0]) != -1) {
                return "white"
            } else {
                return "gray"
            }
        });
}

结果：

Answer 1

只是为了节省一些代码行，您可以在tickFormat内选择文本元素（尽管这不是tickFormat的目的），使用this时，定义行生成器，并应用您想要的样式：

var axis = d3.axisBottom(scale)
  .tickFormat(function(d) {
    if (d === "bar") {
      d3.select(this).style("fill", "gray")
    }
    return d;
  });

这是一个演示：

var svg = d3.select("svg")
var scale = d3.scaleBand()
  .range([20, 280])
  .domain(["foo", "bar", "baz"]);
var axis = d3.axisBottom(scale)
  .tickFormat(function(d) {
    if (d === "bar") {
      d3.select(this).style("fill", "gray")
    }
    return d;
  });
var gX = svg.append("g")
  .attr("transform", "translate(0,50)");
axis(gX);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

在您的示例中，您的样式取决于数据。另一方面，如果样式不依赖于数据（例如，当您想要为所有刻度应用相同的样式时），替代方案甚至更短：只需将样式应用于包含{{1}的样式} element。

因此，您的方法不是唯一的方法。关于它是最好的，我不想说什么，因为这是基于意见的，取决于几个因素。