js如何生成散点图使用D3.js绘制数据散点图-js教程-PHP中文网

js如何生成散点图使用D3.js绘制数据散点图

冰火之心

发布： 2025-06-24 13:56:02

原创

641人浏览过

如何用d3.js创建散点图并添加工具提示和样式？首先准备数据，如对象数组包含x和y值；接着创建svg元素并设置宽高；然后定义x和y轴的比例尺，将数据映射到屏幕坐标；随后绑定数据并绘制圆圈；再添加坐标轴提升可读性；要添加工具提示，需创建div并监听mouseover、mousemove、mouseout事件以显示、移动和隐藏提示框；自定义样式可通过修改fill、r属性改变圆圈颜色和大小，或使用rect、polygon替代circle，同时用css调整坐标轴样式；处理大量数据时可用数据抽样、canvas渲染、数据聚合或虚拟化等优化手段。

js如何生成散点图使用D3.js绘制数据散点图

使用D3.js，你可以通过绑定数据到SVG元素（通常是圆圈）来生成散点图，并使用比例尺函数来映射数据值到屏幕坐标。

解决方案：

首先，你需要准备数据。数据通常是一个对象数组，每个对象包含x和y坐标的值。例如：

const data = [
  { x: 10, y: 20 },
  { x: 40, y: 60 },
  { x: 70, y: 30 },
  { x: 20, y: 80 },
  { x: 50, y: 10 }
];

登录后复制

然后，创建SVG元素，并设置其宽度和高度：

const width = 500;
const height = 300;

const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

登录后复制

接下来，定义比例尺。比例尺将数据值映射到SVG坐标。我们需要为x轴和y轴分别定义比例尺：

const xScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.x)])
  .range([0, width]);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.y)])
  .range([height, 0]); // 注意：y轴方向需要反转

登录后复制

现在，可以使用比例尺将数据绑定到圆圈元素，并创建散点图：

svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => xScale(d.x))
  .attr("cy", d => yScale(d.y))
  .attr("r", 5) // 圆圈半径
  .attr("fill", "steelblue");

登录后复制

最后，可以添加坐标轴，使散点图更易于阅读：

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

svg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(xAxis);

svg.append("g")
  .call(yAxis);

登录后复制

这样就完成了一个简单的D3.js散点图。

D3.js散点图如何添加工具提示？

添加工具提示可以帮助用户更好地理解散点图中的数据点。可以使用D3.js的mouseover、mousemove和mouseout事件来实现。首先，创建一个div元素用于显示工具提示：

const tooltip = d3.select("body")
  .append("div")
  .style("position", "absolute")
  .style("visibility", "hidden")
  .style("background", "#fff")
  .style("border", "1px solid #ccc")
  .style("padding", "5px")
  .style("font-size", "12px");

登录后复制

然后，在创建圆圈时，添加事件监听器：

svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => xScale(d.x))
  .attr("cy", d => yScale(d.y))
  .attr("r", 5)
  .attr("fill", "steelblue")
  .on("mouseover", function(event, d) {
    tooltip.style("visibility", "visible")
      .text(`X: ${d.x}, Y: ${d.y}`);
  })
  .on("mousemove", function(event) {
    tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
  })
  .on("mouseout", function() {
    tooltip.style("visibility", "hidden");
  });

登录后复制

这段代码会在鼠标悬停在圆圈上时显示工具提示，并在鼠标移动时更新工具提示的位置，鼠标移开时隐藏工具提示。

如何自定义D3.js散点图的样式？

D3.js提供了丰富的API来定制散点图的样式。你可以修改圆圈的颜色、大小、形状，以及坐标轴的样式。

修改圆圈颜色和大小： 在创建圆圈时，可以使用attr方法修改fill（填充颜色）和r（半径）属性。例如，attr("fill", "red").attr("r", 8)会将圆圈的颜色设置为红色，半径设置为8。
修改圆圈形状： 除了圆圈，还可以使用其他SVG元素作为数据点，例如矩形、三角形等。只需将append("circle")替换为append("rect")或append("polygon")即可。
修改坐标轴样式： 可以使用CSS样式来修改坐标轴的颜色、字体、刻度线等。例如，可以使用以下CSS样式来修改坐标轴的颜色：

.axis line,
.axis path {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

登录后复制

D3.js散点图如何处理大量数据？

处理大量数据时，直接渲染所有数据点可能会导致性能问题。可以考虑以下几种优化方法：