javascript - D3 V4，如何在每个数据点都有刻度线，但仅在选定的数据点有标签

Question

正如您从图像中看到的，我使用的是每月数据。我正在尝试找到一种方法来显示每个刻度线，但仅显示四月标签。例如:2014 年 4 月、2015 年 4 月、2016 年 4 月和 2017 年 4 月 - 并保留其间的刻度线。提前致谢。

X axis generated from this code

   g.append("g")
          .attr("class", "axis axis--x")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x).ticks(d3.timeMonth.every(1))
                             .tickFormat(d3.timeFormat("%b %Y")  )
                           );

    g.select('.axis.axis--x')
    .selectAll("text") 
                .style("text-anchor", "end")
                .attr("dx", "-.8em")
                .attr("dy", ".15em")
                .attr("transform", "rotate(-65)" );

感谢 Sira，这就是我的最终结果:

 g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(d3.timeMonth.every(1))
                         .tickFormat(d3.timeFormat("%b %Y")  )
                        );

g.select('.axis.axis--x')
.selectAll("text") 
            .style("text-anchor", "end")
                        .style("opacity", function(d){
                                if (d3.select(this).text().includes("Apr")){return "1"}else{return "0"}
                                })             
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", "rotate(-65)" );

Answer 1

看看 d3.class 带回调。在回调中，您将可以访问数据、索引和 this分别。

因此，如果您希望刻度仅在数据中包含“Apr”时显示，您可以执行以下操作:

g.select('.axis.axis--x')
.selectAll("text") 
            .style("text-anchor", "end")
            .attr("display", function(d, i, this) {
               if (!d.contains("Apr") {
                  return "none";
               }
            })
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", "rotate(-65)" );

您可以将 if 替换为其他将返回 "none" 的语句。对于您希望它消失的数据点。