React 中基于 JavaScript 的带有曲线区域的散点图

使用温度和湿度数据构建动态散点图

当您处理多个变量时，有效地可视化数据点至关重要。在这种情况下，绘制 和 散点图可以提供有价值的见解。散点图有助于表示这些变量之间的相关性和模式，尤其是随着时间的推移。

除了简单的绘图之外，您可能还想创建专门的区域，根据曲线分隔图表的区域。这会为您的图表增加一层复杂性，从而提供更详细的分析，例如定义跨温度范围内不同湿度水平的区域。这可能具有挑战性，尤其是当区域基于曲线时。

值得庆幸的是，有很多库可供使用 和简单的 JavaScript，可以帮助绘制这些数据点并添加弯曲区域。通过使用正确的工具，您可以轻松生成带有自定义区域的散点图，以便更好地进行数据分析。这些工具可以灵活且精确地映射非线性关系。

在本文中，我们将探讨如何收集数据点并使用流行的 JavaScript 和 React 库来绘制带有弯曲区域的散点图。通过正确的设置，您将能够有效地将温度和湿度数据映射到图表中。

命令	使用示例
d3.line()	此方法创建一个线生成器，用于在折线图中绘制点。它用于定义数据点的连接方式并允许自定义曲线类型。在示例中，它与 在数据点之间创建平滑的曲线。
curve(d3.curveNatural)	该命令指定直线生成器的曲线类型。 应用平滑、自然的曲线，非常适合在散点之间绘制非线性区域。
.datum()	此 D3.js 函数将单个数据数组绑定到 SVG 元素。当您需要绘制基于一组数据点的单条线或形状时，通常会使用它，例如从一系列点绘制弯曲区域的情况。
.attr()	D3.js 中的 attr 方法设置或获取所选元素的属性。它在这里用于定义 SVG 属性，例如 （路径数据）和 用于设计弯曲区域的样式。
scaleLinear()	创建将输入域（例如温度）映射到输出范围（例如 x 轴像素值）的线性比例。这对于缩放数据点以适应定义的 SVG 尺寸的散点图至关重要。
Scatter	这是一个 React 组件 这简化了渲染散点图的过程。它处理散点图的布局和数据映射，使其对于在示例中绘​​制点非常有用。
annotation	注释插件在 用于向图表添加标记、线条或形状。在本例中，它用于绘制基于线的注释，用作散点图中弯曲区域的视觉边界。
enter().append()	一种 D3.js 模式，为每个新数据点将新元素附加到 DOM。在示例中，该方法用于添加 散点图中每个温度-湿度对的元素。
cx	此 SVG 属性设置圆的 x 坐标。在示例中， 根据缩放的温度数据设置，将其正确映射到散点图中的 x 轴。

了解 React 中曲线区域散点图的实现

脚本中的第一个示例使用 与强大的结合 库来创建具有弯曲区域的散点图。散点图将温度映射到 x 轴，将湿度映射到 y 轴，有助于可视化这两个变量之间的关系。数据点用圆圈表示，使用 D3 `enter()` 和 `append()` 方法绘制，这确保每个数据点都添加到 DOM 中。实现的一个关键方面是使用“scaleLinear()”线性刻度，它将温度和湿度值映射到 SVG 内的像素位置，从而允许点在图表上正确定位。

除了绘制数据点之外，该脚本还使用线条生成器（`d3.line()`）绘制曲线区域。此命令创建表示指定点之间的曲线的路径，允许在散点图上绘制非线性区域。在本例中，应用“curve(d3.curveNatural)”在温度和湿度值之间创建平滑、自然的曲线。这些曲线对于定义散点图中的不同区域至关重要，散点图中可以表示感兴趣的特定区域或范围，例如基于温度的舒适或危险湿度范围。

第二个例子利用 React 是一个更简单但有效的图表渲染库。 Chart.js“Scatter”组件用于绘制温度和湿度数据点。虽然 Chart.js 在创建自定义可视化方面不如 D3.js 灵活，但它为散点图提供了直观的设置。这里的一个关键功能是“注释”插件，它允许在图表上绘制形状、线条或区域。该插件用于通过在散点图的各个部分绘制直线来近似弯曲区域，从而在感兴趣的区域之间创建视觉划分。尽管弯曲区域是用直线近似的，但这种方法很简单，并且提供了一种在散点图中可视化区域的快速方法。

这两种方法都包含重要的实践，例如在 D3.js 中使用“scaleLinear()”缩放数据，以及利用 Chart.js 中的内置选项来自定义图表比例。这些方法旨在提高灵活性，允许开发人员针对不同的用例修改和扩展它们。虽然 D3.js 为绘制曲线和区域提供了更多的控制和精度，但 Chart.js 为基本散点图提供了更快的设置，并通过“注释”等插件进行了一定程度的自定义。这两个脚本都是模块化且可重用的，为在 React 应用程序中构建带有弯曲区域的交互式散点图提供了灵活性。

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
const ScatterPlotWithCurves = ({ data }) => {
  const svgRef = useRef();
  useEffect(() => {
    const svg = d3.select(svgRef.current)
      .attr('width', 500)
      .attr('height', 500);
    const xScale = d3.scaleLinear()
      .domain([d3.min(data, d => d.temperatureC), d3.max(data, d => d.temperatureC)])
      .range([0, 500]);
    const yScale = d3.scaleLinear()
      .domain([d3.min(data, d => d.humidity), d3.max(data, d => d.humidity)])
      .range([500, 0]);
    svg.selectAll('.dot')
      .data(data)
      .enter().append('circle')
      .attr('cx', d => xScale(d.temperatureC))
      .attr('cy', d => yScale(d.humidity))
      .attr('r', 5);
    // Add zones using curved paths
    const lineGenerator = d3.line()
      .x(d => xScale(d[0]))
      .y(d => yScale(d[1]))
      .curve(d3.curveNatural);
    svg.append('path')
      .datum([[30, 60], [40, 70], [50, 80]])
      .attr('d', lineGenerator)
      .attr('stroke', 'red')
      .attr('fill', 'none');
  }, [data]);
  return <svg ref={svgRef}></svg>;
};
export default ScatterPlotWithCurves;

import React from 'react';
import { Scatter } from 'react-chartjs-2';
const ScatterPlot = ({ data }) => {
  const chartData = {
    datasets: [{
      label: 'Temperature vs Humidity',
      data: data.map(d => ({ x: d.temperatureC, y: d.humidity })),
      borderColor: 'blue',
      pointBackgroundColor: 'blue',
    }],
  };
  const options = {
    scales: {
      x: { type: 'linear', position: 'bottom', title: { display: true, text: 'Temperature (°C)' } },
      y: { title: { display: true, text: 'Humidity (%)' } },
    },
    plugins: {
      annotation: { // Plugin to draw curved zones
        annotations: [{
          type: 'line',
          xMin: 30, xMax: 50, yMin: 60, yMax: 80,
          borderColor: 'red', borderWidth: 2,
        }],
      },
    },
  };
  return <Scatter data={chartData} options={options} />;
};
export default ScatterPlot;

探索在 React 中创建散点图的替代库

此外 和 ，还有其他强大的库可以处理散点图创建 。其中一个选项是 Plotly，它是一个兼具灵活性和易用性的图表库。 Plotly 允许交互式绘图，包括散点图，您不仅可以绘制数据，还可以使用注释或形状绘制功能添加弯曲区域。 Plotly 内置了对响应式设计的支持，使其适合需要针对不同屏幕尺寸进行调整的 Web 应用程序。

另一种选择是使用 ，一个专门为 React 应用程序设计的库。与 D3.js 相比，Recharts 提供了更简单的 API，对于希望以最少的配置快速获得结果的开发人员来说是一个不错的选择。它支持散点图和自定义形状，从而可以近似弯曲区域。尽管 Recharts 没有 D3.js 的广泛自定义，但它仍然是处理基本散点图的强大选择，特别是当易用性和可读性是关键考虑因素时。

最后，对于那些想要最高性能和渲染速度的人来说， 是一个不错的选择。 CanvasJS 是轻量级的，专注于使用 HTML5 画布进行绘图。它可以有效处理大型数据集并支持实时更新，非常适合需要高性能的应用程序。虽然 CanvasJS 可能缺乏 D3.js 中的一些灵活性，但它非常适合需要快速渲染和响应能力的应用程序，例如监控仪表板。

1. 在 React 中创建散点图的最佳库是什么？
2. 是在 React 中创建散点图的最强大的库之一，特别是当您需要高级自定义时。然而，对于更简单的用例， 或者 可能更容易实施。
3. 我可以将 Chart.js 用于散点图中的弯曲区域吗？
4. 是的，您可以近似弯曲区域 使用 添加线条或形状的插件。然而，对于更复杂的曲线， 可能更合适。
5. 如何在 React 中使散点图响应？
6. 图书馆喜欢 和 为图表提供内置响应能力。您还可以手动调整 SVG 元素的大小 确保您的散点图随窗口大小缩放。
7. Recharts 和 D3.js 散点图的主要区别是什么？
8. 更易于使用并且专为 React 设计，但定制选项较少。 提供对图表呈现方式的更深入控制，但需要更多设置。
9. 我可以在 React 的散点图中使用实时数据吗？
10. 是的，图书馆喜欢 和 针对实时数据渲染进行了优化。您可以使用其 API 动态更新数据点。

为散点图选择正确的 JavaScript 库取决于您的具体需求。为了深度定制和精确度， 是最好的选择，而 Chart.js 为基本绘图提供了更快、更简单的解决方案。

每种方法都可以灵活地可视化您的 和湿度数据。了解这些库可确保您轻松创建交互式且有效的绘图，无论复杂程度如何。