gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:40:11 26 4
gpt4 key购买 nike

我正在尝试了解当前版本 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 方式是什么?

最佳答案

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

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

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

注释

关于d3.js - d3 v4 + react + ES6 : How to create axis programmatically?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38381241/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com