React D3 x 轴文本倾斜 - 如何访问转换属性？打勾格式？

Question

我在 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 函数来更改刻度上的文本，如果是，如何？

Can/should 刻度是从 /common/axes/AxisTicks.js 操纵的吗？ https://github.com/esbullington/react-d3/issues/162

Answer 1

在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 图表轴刻度的 shared/common 属性。

如果有更好的方法请post！

React D3 x 轴文本倾斜 - 如何访问转换属性？打勾格式？

React D3 x-axis text tilt - how to access transform property? tickFormat?

svg

reactjs

react-d3

React D3 x 轴文本倾斜 - 如何访问转换 属性？打勾格式？

React D3 x-axis text tilt - how to access transform property? tickFormat?

svg

reactjs

react-d3

React D3 x 轴文本倾斜 - 如何访问转换属性？打勾格式？