SVG条形图轴标注答案

【问题标题】：SVG bar chart axis labelingSVG条形图轴标注
【发布时间】：2020-07-29 02:26:51
【问题描述】：

希望使用 D3 SVG 对条形图进行样式化。现在它在 y 轴上包含一个数字，在 x 轴上包含每日标签。每天都有一个刻度线，我只想显示一周的第一个日期。我怎样才能每周只显示一个？代码如下：

d3.csv("us-counties-cases.csv", function(data) {

  filteredData = data.filter(function(row) {
        return row['county'] == 'New York City';
    });

  var x = d3.scaleBand()
    .range([ 0, width])
    .domain(filteredData.map(function(d) {
      return d.date; 
    }))
    .padding(0.2);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
      .attr("transform", "translate(-10,0)rotate(-45)")
      .style("text-anchor", "end");

  // Add Y axis
  var max = d3.max(filteredData, function(d) { return d.cases; });
  var y = d3.scaleLinear()
    .domain([0, max * 1.2])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Bars
  svg.selectAll("mybar")
    .data(filteredData)
    .enter()
    .append("rect")
      .attr("x", function(d) { 
        return x(d.date); 
        })
      .attr("width", x.bandwidth())
      .attr("fill", "#b3b3b3")
      .attr("height", function(d) { 
        return height - y(0); 
      })
      .attr("y", function(d) { 
        return y(0); 
      })

  // Animation
  svg.selectAll("rect")
    .transition()
    .duration(200)
    .attr("y", function(d) { 
      return y(d.cases); 
    })
    .attr("height", function(d) { 
      return height - y(d.cases); 
    })
    .delay(function(d,i){
        return(i*50)
      })
  })

【问题讨论】：

这能回答你的问题吗？ D3 Axis ticks by Week of Year
不，如果您使用的比例没有实现 scale.ticks，axis.tick() 方法将不起作用，就像在使用 scaleBand 的 OP 问题中一样。否则这将是正确的方法。

标签： javascript d3.js svg

【解决方案1】：

通常您可以使用axis.tick() 来设置控制刻度如何显示的参数。除其他外，您可以设置可视化的刻度数。

但是，正如您在 documentation 中看到的那样，此方法及其参数的效果取决于轴的刻度类型。如果您使用scaleBand，axis.tick() 无效，您应该使用axis.tickValues 明确设置刻度值。同样，如果要更改刻度格式，则需要使用axis.tickFormat。

针对您的具体情况，以下代码将 x 轴修改为每 7 天仅显示一个刻度：

d3.axisBottom(x).tickValues(x.domain().filter( (d,i) => !(i % 7) ))

【讨论】：