将d3图表与reactjs集成
Integrating d3 chart with reactjs
我想使用d3库创建三个图表-每个都有自己的html。所以我想达到这样的效果:
render: function () {
var elements = [];
for (var i in response) { // getting chart data from some API response
elements.push(React.createElement(SingleChartsDOM, {data: response[i]});
createSingleChart(response[i]);
}
return elements;
}
我想要chart header (SingleChartsDOM类)-> chart, chart header -> chart, chart header -> chart。
SingleChartsDOM只返回一些react dom,它工作正常。CreateSingleChart()
函数为d3函数:
createSingleChart: function (dataset) {
var container = 'dashboardContent';
var data = [];
data = dataset.statistics;
var margin = {top: 20, right: 0, bottom: 30, left: 60},
ww = document.getElementById(container).clientWidth - 40,
width = ww - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var svg = d3.select('#' + container).append("div").attr("class", "chart").append("svg")
.data(data)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(data.map(function (d) {
return d.date.slice(5, 10);
}));
y.domain([0, d3.max(data, function (d) {
return d.volume;
})]);
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.style("text-anchor", "end")
.text("Volume");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("height", function (d) {
return height - y(d.volume);
});
function type(d) {
d.volume = +d.volume;
return d;
}
}
问题是我所有的html都是先创建的,图表是最后创建的。所以我猜我的追加并没有发生在循环中,而是html首先呈现,追加在那之后执行。
如何积分?
D3不能这样使用。要么使用recharts之类的声明性图表,要么必须使用componentDidMount
,如下所示:
render() {
return response.map(this.renderChart);
}
renderChart(data, index) {
return (
<div className="chartContainer" ref={"container-" + index}>
<SingleChartsDOM data={data} />
</div>
);
}
componentDidMount() {
for (var index in response) {
var container, data;
container = this.refs["container-" + index];
data = response[index];
createSingleChart(data, container);
}
}
相关文章:
- 如何在ReactJS JSX中执行嵌套的if-else语句
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- 如何检测用于WebGL的专用或集成显卡
- ReactJS映射:如何仅在url变量不为空时呈现html链接
- 如何更改reactjs中外部/独立组件的状态或属性
- ReactJS和SpringDataRest缓存问题可能与websocket有关
- 在我的SPA应用程序中集成Facebook共享的问题
- reactjs this.refs vs document.getElementById
- vaadin:使用自定义布局集成angular js
- 同构reactjs-cdn资产
- React ajax数据集成
- 在ReactJS中重新渲染孩子3次可以接受吗
- 有没有一个抽象层,这样我就可以集成一次,然后使用pusher、pubnub或faye
- 如何在ReactJs中显示Json数据
- IE中关于ZK和JavaScript集成的一些错误
- 将IndexedDB中的数据拉入数组,并通过ReactJS输出
- 如何在ReactJs中渲染子组件时重新加载子组件的数据
- 如何在ReactJs中链接下拉列表和文本区域
- 将Facebook Web SDK与ReactJS组件状态集成
- 将d3图表与reactjs集成