Question

我在条形图中绘制数据。数据分为两个级别，其中一个级别是年份。我添加了一个范围滑块，以相对于要显示的年份更改绘图的x_range。我尝试通过CustomJS回调实现此功能（第一次尝试使用CustomJS）。

使用滑块，x轴上的因子将按预期更新。但是，如果我随后使用缩放工具，然后再使用重置工具，则会在Web控制台中收到错误消息：

错误：重复因子或子因子：2016

不知道我在设置数据时出了什么问题。因子范围的更新错误吗？

我在MacOS上使用的是Bokeh版本1.1.0。在Safari和Firefox中观察到相同的错误。

下面的代码将重现该错误。

`import React, { Component } from 'react';

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            name:'',
            town: '',
            long: '',
            lat: ''
         }
    }

    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    onSubmit = (e) => {
        e.preventDefault();
        const Register = {
            name: this.state.name,
            town: this.state.town,
            long: this.state.long,
            lat: this.state.lat
        }
    }

}
    fetch ('https://localhost3000/users/', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            name: 'name',
            city: 'city',
            long: 'long',
            lat: 'lat'
        })
    })
    .then(function(response){
        return response.json();
    })
    .then(function(Register){
        console.log(Register)
    });

    *render() {  
        return ( *
            <div>
                <form className="form-style">
                    <label>
                    Name:<br/>
                    <input name='name' value={this.state.name}
                    placeholder="Enter Your Farm Name"
                    onChange={e => this.handleChange(e)}/>
                    </label><br/>
                    <label>
                    Town:<br/>
                    <input name='town' value={this.state.town}
                    placeholder="Enter town where farm is located"
                    onChange={e => this.handleChange(e)}/>
                    </label><br/>
                    <label>
                    Longitude:<br/>
                    <input name='long' value={this.state.long}
                    placeholder="Enter Your Farm Longitude"
                    onChange={e => this.handleChange(e)}/><br/>
                    Latitude:<br/>
                    <input name='lat' value={this.state.lat}
                    placeholder="Enter Your Farm Latitude"
                    onChange={e => this.handleChange(e)}/>
                    </label><br/>
                    <Link><a href="https://www.latlong.net/" target="_blank">
                    Get Longitude and Latitude of current location here</a></Link><br/>
                    <button onClick={e => this.handleSubmit(e)}
                    disabled={!this.state.name}
                    disabled={!this.state.long}
                    disabled={!this.state.lat}
                    disabled={!this.state.town}>
                    Register</button>
                </form>


            </div>    
        )

    };


export default Register ;`

Answer 1

尝试一下（与Bokeh v1.1.0兼容）：

callback = CustomJS(args = dict(slider = slider, source = source, plt = p), code = """
    var factors = []
    for (var i = 0; i < source.get_length(); i++){
        if (source.data['year'][i] >= slider.value[0] && source.data['year'][i] <= slider.value[1]){
            factors.push(source.data['categories'][i]);
        }
    }
    plt.x_range.factors = factors; """)

散景：Custom_JS更改x_range导致重复因子或子因子错误

1 个答案: