d3.js - d3 v4 + react + ES6 : How to create axis programmatically?

Question

我正在尝试了解当前版本 4 中的 d3。具体来说:我尝试在 React 和 es6 中为简单的折线图创建 x 轴。

我看过 Mike Bostock 的例子以及他是如何做到的:

svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

但这既不是 React 也不是 ES6。

在另一个网站上我看到了以下变体:

renderAxis() {
  var node  = this.refs.axis;
  var axis = d3.svg.axis().orient(this.props.orient).ticks(5).scale(this.props.scale);
  d3.select(node).call(axis);
}

render() {
  return <g className="axis" ref="axis" transform={this.props.translate}></g>
}

这是 React 和 ES6，但不是版本 4 中的 d3。

我可以尝试将版本 3 的代码采用到 d3 的版本 4，但是: d3.select 让我非常困扰。当我使用 React (或其中的其他库，如 d3)时，我不想进行 DOM 调用。 React 应该用于以最有效的方式渲染到 DOM 中，而不是获取 DOM 节点。

所以，我的问题是: 创建一个简单的 x 轴的 react 方式是什么？或者，如果还没有这样的答案:采用 Mike Bostock 引用的代码的 react 方式是什么？

Answer 1

经过几年尝试在 React 中找出 d3，这是我和我的团队发现的制作坐标轴的最佳方式:

const Axis = props => {
    const axisRef = axis => {
        axis && props.axisCreator(select(axis));
    };

    return <g className={props.className} ref={axisRef} />;
};

注释

• axisCreator 是 axisBottom 返回的函数、axisLeft 等。它是在组件外部创建的，以便向用户展示 d3 轴库的全部功能。
• className 允许用户根据自己的需要设置轴的样式。
• 此示例使用 refs，其中 the React docs caution against ，但它使用 refs 与第三方 DOM 库集成，即 one of the reasons to use refs that the React docs call out specifically .
• 使用 d3 的 select 给你带来麻烦是可以理解的，但是如果你想让 d3 操作 DOM，那么这是必需的，如果你不让 d3 操作 DOM，你就失去了一切d3 的功能(即 incredibly cool library )。