人力车图表将刻度旋转 -90 度答案

【问题标题】：Rickshaw Graphs rotate ticks by -90 degrees人力车图表将刻度旋转 -90 度
【发布时间】：2013-12-12 14:08:13
【问题描述】：

我正在为仪表板项目试用 Dashing 框架，并尝试使用 rickshaw.js 为仪表板绘制图形。我已经自定义了标签，所以它们正是我想要的，但不幸的是，文本似乎堆叠在一起。我一直在尝试像我发现的here 那样使用tickTransformation，但它似乎不起作用。这是我目前拥有的（注意这是coffeescript，而不是javascript。

@graph = new Rickshaw.Graph(
element: @node
width: width
height: height
renderer: @get("graphtype")
series: [
  {
  color: "#fff",
  data: [{x:0, y:0}]
  }
]
  )
x_axis = new Rickshaw.Graph.Axis.X(
  graph: @graph
  tickFormat: Rickshaw.Fixtures.Number.myXFormat
  tickTransform: (svg) ->
    svg.style("text-anchor", "start")
    .attr("transform", "rotate(-90)")
)
y_axis = new Rickshaw.Graph.Axis.Y(
  graph: @graph
  tickFormat: Rickshaw.Fixtures.Number.myYFormat
  tickTransform: (svg) ->
    svg.style("text-anchor", "start")
      .attr("transform", "rotate(-90)")
@graph.render()

它最终看起来像这样：

【问题讨论】：

标签： javascript d3.js coffeescript rickshaw dashing

【解决方案1】：

我认为您想使用tickTransformation 而不是tickTransform。

【讨论】：