Я строю простую линейную диаграмму, используя d3. js v5, но застрял в той части, где установлен цвет фона между двумя выбранными значениями по оси x.
Я щелкнул текст 07day и 13day по оси x, текст и линия окрашены, но я хочу покрыть область цветом фона из 07day * От 1013 * до 13дней .
Вот код
// data.csv
date,temp,humidity
2-Apr-12,2,10,
1-Apr-12,2,10,
3-Apr-12,2,10,
4-Apr-12,2,10,
9-Apr-12,2,10,
10-Apr-12,6,10,
11-Apr-12,6,10,
12-Apr-12,6,10,
13-Apr-12,6,25,
16-Apr-12,6,25,
17-Apr-12,6,25,
18-Apr-12,4,25,
19-Apr-12,4,25,
20-Apr-12,4,25,
23-Apr-12,4,60,
24-Apr-12,4,60,
25-Apr-12,4,60,
26-Apr-12,5,60,
27-Apr-12,5,60,
30-Apr-12,5,60,
1-May-12,5,60
// html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test Chart</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="app.js" defer></script>
<style>
.line {
fill: none;
stroke: steelblue;
stroke-width: 3px;
}
.domain {
display: none;
}
.axis line {
color: #efefef;
}
text {
color: #aaaaaa;
}
.tick .selected-tick {
color: #f5cd79;
stroke-width: 5px;
}
</style>
</head>
<body>
</body>
// app.js
const svg = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right + 70)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// Add the x Axis
svg.append('g').attr('transform', 'translate(0,' + height + ')')
.attr('class', 'axis')
.call(d3.axisBottom(x).tickSize(-(height), 0, 0)
.tickFormat(d3.timeFormat('%d' + 'day'))
.tickPadding(15))
.style("font-size",13)
.selectAll('.tick')
.on('click', function(d, i) {
d3.select(this).select('line').attr('class', 'selected-tick')
d3.select(this).select('text').attr('class', 'selected-tick')
})
Имеет ли d3. js состояние, как в React. js? Если да, то можно было бы установить диапазон с помощью состояний и установить цвет фона между этими двумя.
Если нет, как я могу сохранить эти значения и установить цвет фона? потому что в будущем мне могут понадобиться значения между диапазоном.