From 8cbfb3d903625d7f94a56e65b41413f645cec30d Mon Sep 17 00:00:00 2001 From: goodmice Date: Sun, 3 Jul 2022 19:30:50 +0500 Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD?= =?UTF-8?q?=D0=B0=20=D0=BE=D1=82=D1=80=D0=B8=D1=81=D0=BE=D0=B2=D0=BA=D0=B0?= =?UTF-8?q?=20=D1=82=D0=BE=D1=87=D0=B5=D0=BA=20=D0=BD=D0=B0=20=D0=B3=D1=80?= =?UTF-8?q?=D0=B0=D1=84=D0=B8=D0=BA=D0=B5.=20=D0=94=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=B3=D1=80=D1=83=D0=BF=D0=BF?= =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=BA=D0=B0=20=D0=B8=20=D0=B2=D1=8B?= =?UTF-8?q?=D0=BD=D0=B5=D1=81=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BE=D0=B1=D1=89?= =?UTF-8?q?=D0=B8=D1=85=20=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/d3/D3Chart.tsx | 2 +- src/components/d3/renders/points.ts | 64 ++++++++++++++++++----------- 2 files changed, 42 insertions(+), 24 deletions(-) diff --git a/src/components/d3/D3Chart.tsx b/src/components/d3/D3Chart.tsx index c7938cf..6462601 100644 --- a/src/components/d3/D3Chart.tsx +++ b/src/components/d3/D3Chart.tsx @@ -293,7 +293,7 @@ const _D3Chart = >({ } if (chart.point) - renderPoint(xAxis, yAxis, chart, chartData) + renderPoint(xAxis, yAxis, chart, chartData, true) chart.afterDraw?.(chart) }) diff --git a/src/components/d3/renders/points.ts b/src/components/d3/renders/points.ts index c7f2dad..ecee991 100644 --- a/src/components/d3/renders/points.ts +++ b/src/components/d3/renders/points.ts @@ -4,7 +4,8 @@ export const renderPoint = >( xAxis: (value: any) => number, yAxis: (value: any) => number, chart: ChartRegistry, - data: DataType[] + data: DataType[], + embeded: boolean = false, ): DataType[] => { let config: Required> = { radius: 3, @@ -16,40 +17,57 @@ export const renderPoint = >( fillOpacity: 1, } - if (chart.type === 'point') - config = { ...config, ...chart } - else if (!chart.point) - return data - else + if (embeded) config = { ...config, ...chart.point } + else if (chart.type === 'point') + config = { ...config, ...chart } + else return data - const currentPoints = chart() + const getPointsRoot = (): d3.Selection => { + let root = chart() + if (embeded) { + if (root.select('.points').empty()) + root.append('g').attr('class', 'points') + root = root.select('.points') + } + return root + } + + getPointsRoot() + .transition() + .duration(chart.animDurationMs ?? 0) + .attr('stroke-width', config.strokeWidth) + .attr('fill-opacity', config.fillOpacity) + .attr('fill', config.fillColor) + .attr('stroke', config.strokeColor) + .attr('stroke-opacity', config.strokeOpacity) + + const currentPoints = getPointsRoot() .selectAll(config.shape) .data(data.filter(chart.y)) currentPoints.exit().remove() currentPoints.enter().append(config.shape) - const newPoints = chart() + const newPoints = getPointsRoot() .selectAll(config.shape) .transition() .duration(chart.animDurationMs ?? 0) - if (config.shape === 'circle') - newPoints.attr('r', config.radius) - .attr('cx', (d: any) => xAxis(chart.x(d))) - .attr('cy', (d: any) => yAxis(chart.y(d))) - else - newPoints.attr('x1', (d: any) => xAxis(chart.x(d))) - .attr('x2', (d: any) => xAxis(chart.x(d))) - .attr('y1', (d: any) => yAxis(chart.y(d)) - config.radius) - .attr('y2', (d: any) => yAxis(chart.y(d)) + config.radius) - - newPoints.attr('stroke-width', config.strokeWidth) - .attr('fill-opacity', config.fillOpacity) - .attr('fill', config.fillColor) - .attr('stroke', config.strokeColor) - .attr('stroke-opacity', config.strokeOpacity) + switch (config.shape) { + default: + case 'circle': + newPoints.attr('r', config.radius) + .attr('cx', (d: any) => xAxis(chart.x(d))) + .attr('cy', (d: any) => yAxis(chart.y(d))) + break + case 'line': + newPoints.attr('x1', (d: any) => xAxis(chart.x(d))) + .attr('x2', (d: any) => xAxis(chart.x(d))) + .attr('y1', (d: any) => yAxis(chart.y(d)) - config.radius) + .attr('y2', (d: any) => yAxis(chart.y(d)) + config.radius) + break + } return data }