ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Доработан график D3HorizontalChart

Browse Source
This commit is contained in:
ts_salikhov 2022-10-04 13:55:18 +04:00
parent a965a9b693
commit 74b309ee87
1 changed files with 21 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/d3/D3HorizontalChart.tsx
View File

@ -33,8 +33,8 @@ const D3HorizontalChart = memo((
useEffect(() => { useEffect(() => {
if (width < 100 || height < 100) return if (width < 100 || height < 100) return
const _width = width - margin.left - margin.right const chartWidth = width - margin.left - margin.right
const _height = height - margin.top - margin.bottom const chartHeight = height - margin.top - margin.bottom
const svg = d3.select('#d3-horizontal-chart') const svg = d3.select('#d3-horizontal-chart')
.attr('width', '100%') .attr('width', '100%')
@ -42,47 +42,42 @@ const D3HorizontalChart = memo((
.append('g') .append('g')
.attr('transform', `translate(${margin.left},${margin.top})`) .attr('transform', `translate(${margin.left},${margin.top})`)
const percents = ['percents']
const names = data.map(d => d.name) const names = data.map(d => d.name)
const stackedData = d3.stack()
//@ts-ignore
.keys(percents)(data)
const xMax = 100 const xMax = 100
// scales // scales
const x = d3.scaleLinear() const x = d3.scaleLinear()
.domain([0, xMax]) .domain([0, xMax])
.range([0, _width]) .range([0, chartWidth])
const y = d3.scaleBand() const y = d3.scaleBand()
.domain(names) .domain(names)
.range([0, _height]) .range([0, chartHeight])
.padding(0.25)
// axes // axes
const tickValues = [0, 25, 50, 75, 100]
const xAxisTop = d3.axisTop(x) const xAxisTop = d3.axisTop(x)
.tickValues([0, 25, 50, 75, 100]) .tickValues(tickValues)
.tickFormat(d => d + '%') .tickFormat(d => d + '%')
const xAxisBottom = d3.axisBottom(x) const xAxisBottom = d3.axisBottom(x)
.tickValues([0, 25, 50, 75, 100]) .tickValues(tickValues)
.tickFormat(d => d + '%') .tickFormat(d => d + '%')
const yAxisLeft = d3.axisLeft(y) const yAxisLeft = d3.axisLeft(y)
const gridlines = d3.axisBottom(x) const gridlines = d3.axisBottom(x)
.tickValues([0, 25, 50, 75, 100]) .tickValues(tickValues)
.tickFormat(d => '') .tickFormat(() => '')
.tickSize(_height) .tickSize(chartHeight)
const yAxisRight = d3.axisRight(y) const yAxisRight = d3.axisRight(y)
.ticks(0) .ticks(0)
.tickValues([]) .tickValues([])
.tickFormat(d => '') .tickFormat(() => '')
svg.append('g') svg.append('g')
.attr('transform', `translate(0,0)`) .attr('transform', `translate(0,0)`)
@ -98,38 +93,30 @@ const D3HorizontalChart = memo((
.call(yAxisLeft) .call(yAxisLeft)
svg.append('g') svg.append('g')
.attr('transform', `translate(0,${_height})`) .attr('transform', `translate(0,${chartHeight})`)
.call(xAxisBottom) .call(xAxisBottom)
svg.append('g') svg.append('g')
.attr('transform', `translate(${_width},0)`) .attr('transform', `translate(${chartWidth},0)`)
.call(yAxisRight) .call(yAxisRight)
const layers = svg.append('g') const layers = svg.append('g')
.selectAll('g') .selectAll('g')
.data(stackedData) .data(data)
.join('g') .join('g')
// transition for bars
const duration = 1000
const t = d3.transition()
.duration(duration)
.ease(d3.easeLinear)
layers.each(function() { layers.each(function() {
d3.select(this) d3.select(this)
.selectAll('rect') .selectAll('rect')
//@ts-ignore .data(data)
.data(d => d)
.join('rect') .join('rect')
.attr('fill', (d, i) => colors ? colors[i] : 'black') .attr('fill', (d, i) => colors ? colors[i] : 'black')
//@ts-ignore .attr('y', d => String(y(d.name)))
.attr('y', d => y(d.data.name))
.attr('height', y.bandwidth()) .attr('height', y.bandwidth())
//@ts-ignore .transition()
.transition(t) .duration(1000)
//@ts-ignore .ease(d3.easeLinear)
.attr('width', d => d.data.percent >= 0 ? x(d.data.percent) : 0) .attr('width', d => d.percent >= 0 ? x(d.percent) : 0)
}) })
return () => { return () => {