0

我在 React-D3 中使用条形图：

我的 x 轴标签相互碰撞，我想旋转它们以提高可读性，

没有 React 渲染的 D3 在这里解决了一个问题： http ://www.d3noob.org/2013/01/how-to-rotate-text-labels-for-x-axis-of.html

如何将此解决方案放入 React-D3 包中？

我在哪里可以访问“text”或“tick”上的“transform”属性？

我试图在 BarChart.js 上将道具作为“xAxisTransform”传递，但它没有注册。

我应该使用 tickFormat 函数来更改刻度上的文本，如果是，如何？

可以/应该从 /common/axes/AxisTicks.js 操作刻度吗？ https://github.com/esbullington/react-d3/issues/162

4

1 回答 1

0

在其中 可以添加node_modules/react-D3/common/axes/AxisTicks.js 一个 switch 语句（取决于轴刻度在图形上的位置） 。transform = rotate(-65)

确保声明transform为变量：

render:function() {
    var props = this.props;

    var tr,
        ticks,
        scale,
        adjustedScale,
        textAnchor,
        transform,
        tickFormat,
        y0, y1, y2, dy, x0, x1, x2, dx;

并在元素由 React 创建并返回的底部将其添加到样式对象：

React.createElement("text", {
      strokeWidth: "0.01", 
      dy: dy, x: x1, y: y1, 
      style: {stroke:props.tickTextStroke, fill:props.tickTextStroke}, 
          textAnchor: textAnchor,
          transform: transform
      }

这解决了直接的问题，但是，破解了所有 D3 图表轴刻度的共享/公共属性。

如果有更好的方法，请留言！

于 2015-12-09T21:10:14.100 回答