[英]Updating d3 elements in React?
我正在尝试根据输入栏中的搜索输入来修改此气泡图。 现在,我将所有d3代码放在Bubble.js中,然后在我的app.js中,我有一个searchinput元素将过滤要显示的数据,然后在我的Bubble状态下,将其数据设置为过滤后的数据(名为RoadmapData)。 但是,我的气泡图没有更新。 实际上,每次我输入内容时,都会呈现另一个气泡图,因此,如果我输入3个字母,则会有三个相同且未经过滤的气泡图 。
现在是我的代码:
import React, { Component } from "react";
import * as d3 from "d3";
class Bubble extends Component {
constructor(props) {
super(props);
this.state = {
dataset: { children: this.props.RoadmapData }
};
}
componentWillReceiveProps(nextProps) {
var diameter = 600;
var color = d3.scaleOrdinal(d3.schemeCategory10);
var bubble = d3
.pack(this.state.dataset)
.size([diameter, diameter])
.padding(1.5);
var svg = d3
.select("body")
.append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
var nodes = d3.hierarchy(this.state.dataset).sum(function(d) {
return d.Count;
});
var node = svg
.selectAll(".node")
.data(bubble(nodes).descendants())
.enter()
.filter(function(d) {
return !d.children;
})
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title").text(function(d) {
return d.Name + ": " + d.Count;
});
node
.append("circle")
.attr("r", function(d) {
return d.r;
})
.style("fill", function(d, i) {
return color(i);
});
node
.append("text")
.attr("dy", ".2em")
.style("text-anchor", "middle")
.text(function(d) {
return d.data.Name.substring(0, d.r / 3);
})
.attr("font-family", "sans-serif")
.attr("font-size", function(d) {
return d.r / 5;
})
.attr("fill", "white");
node
.append("text")
.attr("dy", "1.3em")
.style("text-anchor", "middle")
.text(function(d) {
return d.data.Count;
})
.attr("font-family", "Gill Sans", "Gill Sans MT")
.attr("font-size", function(d) {
return d.r / 5;
})
.attr("fill", "white");
}
render() {
return <div>{this.node}</div>;
}
}
export default Bubble;
我是d3的初学者,但是我觉得问题是我使用了错误的生命周期方法(我在这里使用componentWillReceiveProps,当我使用componentMount()并在搜索栏中键入内容时,没有任何变化。或者也许我不应该这样做返回this.node?预先感谢。
发生的事情是,每次重新渲染componentWillReceiveProps
, componentWillReceiveProps
函数都会创建可视化的新实例,并通过对node.append
的调用将其添加到React创建的<div>
节点中。 您可以通过d3 remove()
函数remove()
先前创建的实例来避免这种情况。
如果您愿意引入另一个库,那么可以使用一个名为React Faux Dom的库,它可以避免所有React生命周期的问题,而只需照常执行render()
函数中的所有操作即可。 它可能会简化一些事情。
您还提到,图表每次都是未过滤的-这是因为您仅将数据属性分配给构造函数中的state
-仅在首次创建组件时才运行一次。 在这种情况下,看起来您可以安全地删除它并每次都从this.props.RoadmapData
读取数据(似乎没有对组件内部的状态进行任何更改)。
您只需要在render()
的开头添加一行,即可将数据转换为d3的正确格式,例如:
var roadmapDataForD3 = { children: this.props.RoadmapData };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.