Question

正如您从图像中看到的那样，我使用的是月度数据。我试图找到一种方法来显示每个刻度线，但只显示四月份的标签。例如：2014年4月，2015年4月，2016年4月和2017年4月 - 并在两者之间保留刻度线。提前谢谢。

   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。

所以，如果你想让滴答只显示它是否包含＆＃34; 4月＆＃34;在数据中，您可以执行以下操作：

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"的其他语句。

D3 V4，我如何在每个数据点都有一个刻度线，但只有选择数据点的标签

1 个答案: