var view = paper
.append("rect")
.style("fill", 'url(#linear-gradient)')
.style("stroke-width", 0)
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);let line_gradient = context.createLinearGradient(0, y(maxvalue), 0, y(minvalue)); //area what simulate line
line_gradient.addColorStop("0","rgb(251, 70, 70)");
line_gradient.addColorStop("0.15","rgb(251, 70, 70)");
line_gradient.addColorStop("0.4","rgb(63, 251, 167)");
line_gradient.addColorStop("0.6","rgb(63, 251, 167)");
line_gradient.addColorStop("0.6","rgb(64, 249, 251)");
line_gradient.addColorStop("1.0","rgb(64, 249, 251)");
let line = d3.line()//line don't maybe will need, now hidden
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.y); })
.curve(d3.curveLinear)
.context(context),
area = d3.area()//gradient underline
.x(function(d) { return x(d.date); })
.y0(y(0))
.y1( (d) => { return y(d.y-1.5); })
.curve(d3.curveLinear)
.context(context);
context.beginPath();//graphic line
line(data);
context.lineWidth = 3;
context.strokeStyle = line_gradient;
context.stroke(); //graphic line endvar ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="red";
ctx.stroke();var xAxis = d3.axisBottom(x)
.ticks((width + 2) / (height + 2) * 10)
.tickSize(height)
.tickPadding(8 - height);.append('linearGradient')
.attr('id', 'linear-gradient')
.attr('x1', '0%')
.attr('y1', '0%')
.attr('x2', '100%')
.attr('y2', '100%')
.selectAll('stop')
.data(["#2c7bb6", "#00a6ca", "#00ccbc", "#90eb9d", "#ffff8c", "#f9d057", "#f29e2e", "#e76818", "#d7191c"])
.enter()export default connect(
state => ({
TransportData: state.globalR.controlR.TransportData,
login: state.globalR.authorizationR.login,
token: state.globalR.authorizationR.token,
messageStatus: state.globalR.authorizationR.messageStatus,
messageStatusssss: state.globalR.authorizationR.messageStatusssss
}),
dispatch => bindActionCreators(ActionCreator, dispatch)
)(controlPage)<form className='admin_page'>
<div className={'form_message ' + this.state.formError} >
<p>{this.state.message}</p>
</div>
<Required
type = "text"
name = 'password'
className = {'input ' }
placeholder = "Введите пароль *"
onChange = {this.enterToState.bind(this)}
/>
<Required
type = "text"
className = {'input ' }
name = 'password_confirm'
placeholder = "Введите подтверждение пароля *"
onChange = {this.enterToState.bind(this)}
/>
<button
type="button"
className = 'btn_black'
onClick = {this.addition.bind(this)}
>
Изменить пароль
</button>{
key: 'render',
value: function render() {
var data = _extends({}, this.props);
//unicumcrakozyabl
return _react2.default.createElement('input', _defineProperty({
name: data.name,
type: data.type,
defaultValue: data.value,
value: this.state.value,
className: data.className + this.state.error_emty_field,
style: data.style,
placeholder: data.placeholder,
onChange: data.onChange
}, 'onChange', this.enterToThisState.bind(this)));
}react2.default.createElement(_Required2.default, {
checkinput: this.state.checkinput,
data_from_required: this.userequireddata.bind(this),
name: 'owner',
type: 'text',
defaultValue: this.state.owner,
className: 'input belongsTo ',
style: { display: this.state.visibilityOwner },
onChange: this.enterToState.bind(this),
placeholder: '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0432\u043B\u0430\u0434\u0435\u043B\u044C\u0446\u0430*'
}),
Как получить деления для оси d3? Как установить минимальный максимальный padding для tick? Или как нарисовать сетку с помощью d3 в canvas?