Как повторно сделать состояние в реакции и d3 заполнить SVG - PullRequest
Новая
       66

Как повторно сделать состояние в реакции и d3 заполнить SVG

0 голосов
/ 11 марта 2019

У меня есть 3 переключателя, которые имеют разные значения.Я хочу иметь возможность изменить цвет заливки SVG на основе переключателя, который нажимается.Прямо сейчас у меня есть компонент реагирования, который обновляет состояние при нажатии переключателя.Тем не менее, когда я нажимаю переключатель, цвета не меняются (заполнить значения).Поэтому мне было интересно, существует ли способ повторного рендеринга объектов, чтобы цвет заливки изменялся в зависимости от переключателей? 

class Chart extends Component {

    constructor(props) {
        super(props)

        this.state = {
            Time_01: '',
            Time_02: '',
            Time_03: '',
            selectedOption: '',
            windowHeight: 0,
            windowWidth: 0,
            rectFillColor: 'gray',

       }
 this.radioChange = this.radioChange.bind(this);
    }

componentDidMount() {
        this.setState({
            windowWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
            windowHeight: Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
        }, () => {
            const svg = d3.select('.chart').append('svg')
                .attr('height', this.state.windowHeight)
                .attr('width', this.state.windowWidth)
                .attr('id', 'svg-chart')

            this.setState({ svg }, () => { this.draw(this.props) })
        });

        dataJson.rectFillColor = this.state.rectFillColor;
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.rectFillColor !== this.state.rectFillColor) {
            dataJson.rectFillColor = this.state.rectFillColor;
        }
    }

radioChange(e) {
        const selectedOption = e.currentTarget.value;

        let radioButtonObj = {
            TimeRadioTicked_01: false, 
            TimeRadioTicked_02: false, 
            TimeRadioTicked_03: false
        }

        if (selectedOption == 'Value Time') {
            radioButtonObj.TimeRadioTicked_01 = true
            radioButtonObj.TimeRadioTicked_02 = false
            radioButtonObj.TimeRadioTicked_03 = false

        } else if (selectedOption == 'Lead Time') {
            radioButtonObj.TimeRadioTicked_01 = false
            radioButtonObj.TimeRadioTicked_02 = true
            radioButtonObj.TimeRadioTicked_03 = false
        } else {
            radioButtonObj.TimeRadioTicked_01 = false
            radioButtonObj.TimeRadioTicked_02 = false
            radioButtonObj.TimeRadioTicked_03 = true
        }

        this.changeColorOnClick(radioButtonObj);
        this.setState({ selectedOption });
    }

    changeColorOnClick(buttonClicked) {
        if (buttonClicked !== undefined) {
            if (buttonClicked.valueTimeRadioTicked) {
               this.setState({ rectFillColor: 'green' });
            }
        }
    }


 render() {
        return (
            <div>

            <div>
                <input type="radio"
                    value="Time_01"
                    checked={this.state.selectedOption === "Time_01"}

                    onChange={this.radioChange} /> Time_01
                <input type="radio"
                    value="Time_02"
                    checked={this.state.selectedOption === "Time_02"}

                    onChange={this.radioChange} /> Time_02
                <input type="radio"
                    value="Time_03"
                    checked={this.state.selectedOption === "Time_03"}

                    onChange={this.radioChange} /> Time_03  
                </div>
                <div className="chart" /> 


            </div>
        );
    }
}

Отдельный файл JS, содержащий элемент прямоугольника D3 

 var data = [{ x: rectX, y: rectY,radioButtonSelect: selectedOption,
        rectFillColor: dataJson.rectFillColor}]

 var data = [{ x: rectX, y: rectY,
    svg.append("rect")
            .attr("x", (d) => { return d.x })
            .attr("y", (d) => { return d.y })
            .attr("width", 100)
            .attr("height", 200)
            .attr("fill", (d) => { return d.rectFillColor })
            .attr("stroke", "gray")
            .attr('rx', 3)
            .attr('ry', 3)
            .attr("cursor", "move");
...