在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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）