recharts 中的散点图 - 如何使用 4 个象限？

Question

我正在使用 Recharts 在 React 中绘制数据。

我希望能够在绘图过程中看到所有四个笛卡尔象限。我目前正在使用此代码，

import React, { PureComponent } from 'react';
import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, Cell, ResponsiveContainer } from 'recharts';
import { scaleOrdinal } from 'd3-scale';
import { schemeCategory10 } from 'd3-scale-chromatic';

const colors = scaleOrdinal(schemeCategory10).range();

const data = [
  { x: -100, y: 200, z: 200 },
  { x: -120, y: 100, z: 260 },
  { x: -170, y: 300, z: 400 },
  { x: 140, y: 250, z: 280 },
  { x: 150, y: 400, z: 500 },
  { x: 110, y: 280, z: 200 },
];

export default class Baseline extends PureComponent {
  static demoUrl = 'https://codesandbox.io/s/scatter-chart-with-cells-2sk2o';

  render() {
    return (
      <ResponsiveContainer width="100%" height="100%">
        <ScatterChart
          width={400}
          height={400}
          margin={{
            top: 20,
            right: 20,
            bottom: 20,
            left: 20,
          }}
        >
          <CartesianGrid />
          <XAxis type="number" dataKey="x" name="stature" unit="cm" />
          <YAxis type="number" dataKey="y" name="weight" unit="kg" />
          <Tooltip cursor={{ strokeDasharray: '3 3' }} />
          <Scatter name="A school" data={data} fill="#8884d8">
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
            ))}
          </Scatter>
        </ScatterChart>
      </ResponsiveContainer>
    );
  }
}

我的目标是接近这个，

重新绘制图表是最好的主意还是可行？喜欢任何例子:)

Answer 1

您只需添加 ReferenceLine 即可将图表分成 4 个象限。

工作Codesandbox

import "./styles.css";
import React from "react";
import {
  ScatterChart,
  Scatter,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ReferenceLine,
  Cell
} from "recharts";

const data = [
  { x: -100, y: -200, z: 200 },
  { x: -100, y: 200, z: 200 },
  { x: 120, y: 100, z: 260 },
  { x: 120, y: -100, z: 260 },
  { x: 170, y: 300, z: 400 },
  { x: -140, y: -250, z: 280 },
  { x: -140, y: 250, z: 280 },
  { x: 150, y: 400, z: 500 },
  { x: 110, y: 280, z: 200 },
  { x: 110, y: -280, z: 200 }
];

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "red", "pink"];

export default function App() {
  return (
    <ScatterChart
      width={500}
      height={400}
      margin={{
        top: 20,
        right: 20,
        bottom: 20,
        left: 20
      }}
    >
      <CartesianGrid />
      <XAxis type="number" dataKey="x" name="stature" unit="cm" />
      <YAxis type="number" dataKey="y" name="weight" unit="kg" />
      <Tooltip cursor={{ strokeDasharray: "3 3" }} />
      <Scatter name="A school" data={data} fill="#8884d8">
        {data.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
        ))}
      </Scatter>
      <Tooltip cursor={{ strokeDasharray: "3 3" }} />
      <ReferenceLine y={0} stroke="#000000" />
      <ReferenceLine x={0} stroke="#000000" />
      <ReferenceLine
        segment={[
          {
            x: 0,
            y: 0
          },
          {
            x: 0,
            y: 0
          }
        ]}
        label={{
          value: "(0,0)",
          position: "bottom"
        }}
      />
    </ScatterChart>
  );
}

编辑：

您可以使用 segment 将标签放在不同的象限中。

 <ReferenceLine
      segment={[
          {
            x: 85,
            y: 200
          },
          {
            x: 85,
            y: 200
          }
        ]}
        label={{
          value: "high speed high accuracy",
          position: "insideBottom",
          stroke:"#DE3163"
        }}/>
        <ReferenceLine
      segment={[
          {
            x: -85,
            y: 200
          },
          {
            x: -85,
            y: 200
          }
        ]}
        label={{
          value: "low speed high accuracy",
          position: "insideBottom",
          stroke:"#DE3163"
        }}/>
        <ReferenceLine
      segment={[
          {
            x: 85,
            y: -200
          },
          {
            x: 85,
            y: -200
          }
        ]}
        label={{
          value: "high speed low accuracy",
          position: "insideBottom",
          stroke:"#DE3163"
        }}/>
        <ReferenceLine
      segment={[
          {
            x: -85,
            y: -200
          },
          {
            x: -85,
            y: -200
          }
        ]}
        label={{
          value: "low speed low accuracy",
          position: "insideBottom",
          stroke:"#DE3163"
        }}/>

recharts 中的散点图 - 如何使用 4 个象限？

Scatter plot in recharts - how to use 4 quadrants?

javascript

reactjs

d3.js

recharts

编辑：