react中的 D3正在创建多个值更新图



我正在尝试更新图形的颜色,在更新时,所有以前的图形也可见

下面是我的代码:-
class BarChart extends Component {
state = {
color: "green",
};

componentDidUpdate = (prevProps, prevState) => {
if (prevState.color != this.props.color) {
this.drawChart();
}
};
drawChart() {
const data = [12, 5, 6, 6];

const svg = d3
.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 400)

svg
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 70)
.attr("y", (d, i) => 400 - 10 * d)
.attr("width", 65)
.attr("height", (d, i) => d * 10)
.attr("fill", this.props.color);
svg
.selectAll("text")
.data(data)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 70)
.attr("y", (d, i) => 400 - 10 * d - 3);
svg.data(data).exit().remove();
}
render() {
return <div>{this.drawChart}</div>
);
}
}

我想我需要改变selectAll部分,但不知道确切地如何改变它?

您需要包含一个.exit声明

svg
.selectAll("text")
.data(data)
.exit()
.remove()
svg
.selectAll("rect")
.data(data)
.exit()
.remove()

http://bl.ocks.org/alansmithy/e984477a741bc56db5a5

您可能希望使用.selectAll("g")元素/容器来避免必须分别维护'text'和'rect'选择。

相关内容

  • 没有找到相关文章

最新更新