在D3 V5中的轴刻度上设置标签

如何解决在D3 V5中的轴刻度上设置标签

我正在尝试将x轴标签设置为我创建的日期字符串。我尝试使用scaleTime（），但发现这是一场噩梦，并不是我要做的事情真正需要的。

我已经尝试了scaleLinear（）和scaleOrdinal（）几乎“成功”，但并没有完全达到目标

在下面的示例中，“ xlabels”是大约23个字符串的数组，例如： [“ 2020年1月2日”，“ 2020年1月3日” ...等等]

第一次尝试scaleLinear：

   function draw_Xscale() {
      var xScale1 = d3.scaleLinear()
              .domain([0,xlabels.length])
              .range([0,width]);

      const g = svg.append("g")
              .attr("class","axis")
              .attr("transform",`translate(0,${height - 10})`);

      let x_axis = d3.axisBottom(xScale1).ticks(tlabels.length);
      g.call(x_axis).selectAll("line,path").style("stroke","brown");
   }

这将绘制一个轴，但刻度标签是数字[0 .. 22]-不是我想要的。我尝试了一些在线示例中的内容，例如：

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

但无法使其正常工作-可能是我不理解的语法的细微之处。

我也尝试过scaleOrdinal：

   function draw_OrdScale() {
      let arr = Array.from({length: xlabels.length},(e,i) => i);

      var ordinalScale = d3.scaleOrdinal()
         .domain(xlabels)
         .range([0,width]);

      const g = svg.append("g")
         .attr("class","axis")
         .attr("transform",${height-100})`);

      let x_axis = d3.axisBottom(ordinalScale).ticks(tlabels.length);
      g.call(x_axis).selectAll("line,"brown");
   }

这画了一条带有我指定标签的轴，但是其中一半被堆叠在彼此的顶部，而另一半则堆叠在右侧。显然，我的范围是错误的，但不确定要成为什么范围。我尝试将范围设置为：

.range([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22]);

但这只是让他们被卷成左边的黑色涂片。

我一天中的大部分时间都在寻找自己想做的事的例子，但是看起来很少的事却没有。

任何见解的TIA

解决方法

如果您有更多数据，我们将尝试使比例尺更通用。

假设data是具有date属性的对象数组。第一步是使日期达到可用状态：

function toTitleCase(str) {
    return str.replace(/[^-'\s]+/g,function(word) {
        return word.replace(/^./,function(first) {
        return first.toUpperCase();
        });
    });
}

var data = data.map(d => toTitleCase(d.date.toLowerCase()))

这会将每个日期从“ 2020年1月2日”转换为“ 2020年1月2日”。

然后，我们需要使用a date parser。这会将每个日期转换为实际日期对象：

var parseTime = d3.timeParse("%d %b %Y");
data = data.map(d => parseTime(d.date);

最后，我们现在可以使用时间标度，使用d3.extent()在您的数据集中查找最小值和最大值。 d3.extent()将返回一个包含两个值（最小值和最大值）的数组，并且它可以像D3的其余部分一样在日期上工作：

d3
  .scaleTime()
  .domain(d3.extent(d => d.date))
  .nice() // Make the scale look prettier.

这将为您提供一个可以与任何日期自动配合并随着您添加更多值而起作用的刻度。