Question

我尝试使用以下代码旋转x轴文字：

      focus.append("g")
          .attr("class", "axis axis--x")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .selectAll("text")
          .attr("class", "x-axistext")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", ".15em")
          .attr("font-family", textfontfamily) 
          .attr("font-weight",textfontweight)
          .attr("font-size", textfontsize)
          .attr("transform", function (d) {
            return "rotate(-65)"
        });

文本正在旋转，但仅在图形未缩放时才会旋转。在缩放图表上，文本不会旋转。一旦开始缩放图形，新文本将不处于旋转位置。

下一个问题我面临的问题与日期时间格式有关。下面的代码行我用来格式化文本。

var parseDate = d3.timeParse("%H:%M:%S");

但它也无法正常工作。时间与“AM＆＃39; ＆＃39; PM＆＃39;

JSFiddle：这是完整的代码

Answer 1

问题1

时间与'AM''PM'一起显示。

如果您希望刻度线上的时间以格式显示，请提供timeFormat：

xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat("%H:%M:%S"))

问题2

在缩放图表上，文字不会旋转

在缩放/画笔上，您需要选择所有刻度并旋转。

      focus.selectAll(".axis--x")
          .selectAll("text")
          .attr("class", "x-axistext")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", ".15em")
          .attr("font-family", textfontfamily) 
          .attr("font-weight",textfontweight)
          .attr("font-size", textfontsize)
          .attr("transform", function (d) {
            return "rotate(-65)"
        });

工作代码here

Linechart Zoom D3 V4上的文本转换和日期时间格式问题

1 个答案: