0
私は項目数の変化を動的に反映する円グラフを作っています。私はアイテムの数を数えることができましたが、アイテムを更新した後、データをPie Chartに格納するポイントを積み重ねました。私はこの質問を参照項目を更新し、円グラフを動的に変更します。 React.js + D3
：How to change states for making dynamic pie chart?
私は同じように続くが、私のデータは、私の円グラフで更新されません。
円グラフの画像
5つの質問のカテゴリがあります。
ユーザーが項目を追加および削除できる項目のイメージ。アイテムの数は、円グラフに動的に反映される必要があります。私は今質問1のカテゴリーのみを作った。
コード
export default class List extends React.Component {
constructor(props){
super(props);
this.state={
questionItem,
pieData : [{label: "question1", value: 4}, {label: "question2", value: 10}, {label: "question3", value: 25 },{label: "question4", value: 5 },{label: "question5", value: 12 }]
}
}
createItem(item){
this.state.questionItem.unshift({
item : item,
});
this.setState({
questionItem : this.state.questionItem
});
}
findItem(item) {
return this.state.questionItem.filter((element) => element.item === item)[0];
}
toggleComplete(item){
let selectedItem = this.findItem(item);
selectedItem.completed = !selectedItem.completed;
this.setState({ questionItem : this.state.questionItem });
}
saveItem(oldItem, newItem) {
let selectedItem = this.findItem(oldItem);
selectedItem.item = newItem;
let length1 = questionItem.length;
var array = [
{label : "question1" ,value : length1 },
{label : "question2" , value : length1 },
{label : "question3" , value : length1 },
{label : "question4" , value : length1 },
{label : "question5" , value : length1 } ]
this.setState({ questionItem : this.state.questionItem,
pieData : array });
}
deleteItem(item) {
let index = this.state.questionItem.map(element => element.item).indexOf(item);
this.state.questionItem.splice(index, 1);
this.setState({ questionItem : this.state.questionItem });
}
render() {
const { questionItem } = this.state
return (
<div>
<Chart data = { this.state.pieData} />
<div className="list" style={{"display" : "flex"}}>
<div className="titleElement" style={{"flex": "1", "backgroundColor" : "orange"}}>Advice + FAQ </div>
<div style={{"flex": "5", "display": "flex", "flex-direction": "column"}}>
<QuestionList questionItem={this.state.questionItem} deleteItem={this.deleteItem.bind(this)} saveItem={this.saveItem.bind(this)} toggleComplete={this.toggleComplete.bind(this)} />
<CreateItem questionItem={this.state.questionItem} createItem={this.createItem.bind(this)} />
</div>
</div>
</div>);
}
}
class Chart extends React.Component {
render(){
var PieChart = rd3.PieChart
var pieData = [{label: "question1", value: 4}, {label: "question2", value: 10}, {label: "question3", value: 25 },{label: "question4", value: 5 },{label: "question5", value: 12 }];
return (
<PieChart
data={this.props.data}
width={450}
height={400}
radius={110}
innerRadius={20}
sectorBorderColor="white"
title="Pie Chart" />
)}
}
は私の質問を読むためにあなたの時間を割いていただきありがとうございます。