Project

General

Profile

Actions
History

Wiki »

Web tech » History » Revision 23

« Previous | Revision 23/29 (diff) | Next »
jun chen, 02/19/2025 11:48 AM

Web tech

How to visualize data:

D3 ref: https://observablehq.com/@d3/gallery , https://johan.github.io/d3/ex/
Plotly ref: https://plotly.com/javascript/

交互功能对比

功能 JavaScript/Plotly Python/Plotly JavaScript/d3
缩放/平移 ✔️ ✔️ ✔️
悬停显示数值 ✔️ ✔️ ✔️
数据点高亮 ✔️ ✔️ ✔️
导出为图片（PNG/JPEG） ✔️ ✔️ ✔️
动态更新数据 ✔️（需额外代码） ❌ ✔️
旧firefox支持 ❌（globalthis） ? ✔️

以下是逐步解决方案，实现在X轴下方添加可缩放和拖动的滑块条：

1. 调整边距和创建滑块容器

在原有SVG中增加底部边距，并为滑块条创建新的容器。

// 修改边距，底部增加空间给滑块条
const margin = { top: 50, right: 50, bottom: 100, left: 50 };

// 创建主图表容器
const svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// 创建滑块条的容器（位于主图表下方）
const slider = d3.select("svg")
  .append("g")
    .attr("class", "slider")
    .attr("transform", `translate(${margin.left},${height + margin.top + 20})`);

2. 初始化滑块比例尺和轴

使用主图表的原始数据范围定义滑块的比例尺。

// 主图表的比例尺（可缩放）
let x = d3.scaleLinear().range([0, width]);

// 滑块的比例尺（固定为完整数据范围）
let xSlider = d3.scaleLinear().range([0, width]);

// 滑块的X轴
const xAxisSlider = d3.axisBottom(xSlider)
  .tickSize(0)
  .tickFormat("");

3. 绘制滑块条的背景和轴

在滑块区域绘制简化的折线图和轴。

// 在数据加载后初始化滑块
d3.csv("data.csv").then(data => {
  // ...原有数据处理...

  // 初始化滑块比例尺
  xSlider.domain(d3.extent(data, d => d.index));
  
  // 绘制滑块背景折线
  slider.append("path")
    .datum(data)
    .attr("class", "slider-line")
    .attr("d", d3.line()
      .x(d => xSlider(d.index))
      .y(0)); // 简化高度

  // 添加滑块轴
  slider.append("g")
    .attr("class", "x-axis-slider")
    .call(xAxisSlider);
});

4. 添加刷子并处理事件

使用d3.brushX创建交互刷子。

// 创建刷子
const brush = d3.brushX()
  .extent([[0, -10], [width, 10]]) // 设置刷子区域高度
  .on("brush", brushing)
  .on("end", brushEnded);

// 应用刷子到滑块
slider.append("g")
  .attr("class", "brush")
  .call(brush);

// 刷子拖动时的处理函数
function brushing(event) {
  if (!event.selection) return;
  const [x0, x1] = event.selection;
  x.domain([xSlider.invert(x0), xSlider.invert(x1)]);
  updateMainChart(); // 更新主图表
}

// 刷子结束时的处理（双击重置）
function brushEnded(event) {
  if (!event.selection) {
    x.domain(xSlider.domain()); // 重置为完整范围
    updateMainChart();
  }
}

5. 封装主图表更新函数

将主图表的绘制逻辑封装成可重用的函数。

function updateMainChart() {
  // 更新X轴
  svg.select(".x-axis").call(d3.axisBottom(x));
  
  // 更新折线
  svg.selectAll(".line")
    .attr("d", d3.line()
      .x(d => x(d.index))
      .y(d => y(d[currentY])));
  
  // 更新点位置
  svg.selectAll(".dot")
    .attr("cx", d => x(d.index));
  
  // 更新背景区域
  drawBackgroundRegions(ranges);
}

6. CSS样式调整

添加滑块条样式：

.slider-line {
  fill: none;
  stroke: #666;
  stroke-width: 1px;
}

.brush .selection {
  fill: steelblue;
  fill-opacity: 0.3;
  stroke: none;
}

.brush .handle {
  fill: steelblue;
}

完整修改后的代码结构

整合上述修改后的核心代码：

// 设置边距和尺寸
const margin = { top: 50, right: 50, bottom: 100, left: 50 };
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

// 创建SVG容器
const svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom + 50); // 增加底部空间

// 主图表容器
const main = svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// 滑块容器
const slider = svg.append("g")
    .attr("class", "slider")
    .attr("transform", `translate(${margin.left},${height + margin.top + 30})`);

// 初始化比例尺
const x = d3.scaleLinear().range([0, width]);
const xSlider = d3.scaleLinear().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);

// 加载数据
d3.csv("data.csv").then(data => {
  // 数据处理...
  data.forEach(d => {
    d.index = +d.index;
    d.observation1 = +d.observation1;
    d.observation2 = +d.observation2;
  });

  // 设置比例尺
  x.domain(d3.extent(data, d => d.index));
  xSlider.domain(x.domain());
  y.domain([0, d3.max(data, d => Math.max(d.observation1, d.observation2))]);

  // 绘制主图表
  drawMainChart(data);
  
  // 绘制滑块背景
  slider.append("path")
    .datum(data)
    .attr("class", "slider-line")
    .attr("d", d3.line()
      .x(d => xSlider(d.index))
      .y(0));

  // 添加刷子
  const brush = d3.brushX()
    .extent([[0, -10], [width, 10]])
    .on("brush", brushing)
    .on("end", brushEnded);

  slider.append("g")
    .attr("class", "brush")
    .call(brush);
});

function drawMainChart(data) {
  // 绘制折线、点、轴等...
  // 使用x比例尺进行所有定位
}

function updateMainChart() {
  // 更新所有依赖x比例尺的元素
  main.select(".x-axis").call(d3.axisBottom(x));
  main.selectAll(".line").attr("d", ...);
  main.selectAll(".dot").attr("cx", ...);
  // 更新背景区域...
}

// 刷子事件处理函数
function brushing(event) {
  if (!event.selection) return;
  const [x0, x1] = event.selection.map(xSlider.invert);
  x.domain([x0, x1]);
  updateMainChart();
}

function brushEnded(event) {
  if (!event.selection) {
    x.domain(xSlider.domain());
    updateMainChart();
  }
}

交互，圆圈，准心

show code...

button 切换图表

show code...

js d3 内嵌数据显示折线

show code...

JavaScript + Plotly（纯前端实现）

show code...

使用步骤：

  1. 将CSV文件命名为 data.csv，格式如下： 
    x,y
1,5
2,3
3,7
4,2
5,8
  2. 将HTML文件和 data.csv 放在同一目录下，用浏览器打开HTML文件。
  3. 效果：支持缩放、悬停显示数值、拖拽平移等交互。

Python + Plotly（生成独立HTML文件）

特点：适合Python用户，自动化生成图表文件。

show code...

使用步骤：

  1. 安装依赖： 
    pip install pandas plotly
  2. 运行代码后，生成 interactive_chart.html，用浏览器打开即可看到图表。

进阶方案（可选）

  1. 动态数据加载（JavaScript）：

View details...

  • 用户可上传任意CSV文件，实时生成图表。

  1. 添加控件（Python + Dash）：
    View details...

    • 运行后访问 http://localhost:8050，支持动态交互和按钮触发操作。

Updated by jun chen 5 months ago · 29 revisions