如何在D3.js中从元素data属性获取数据绘制图表？是否有更佳方案？

我在创建图表时需要设置数据，这些数据（对象数组）预先存放在HTML的SVG元素中，格式如下：

<svg class="graph-n" data-stuff="{simplified data}"></svg>

随后我用JavaScript和D3.js初始化并配置图表，代码如下：

<script> 
var margin = { top: 20, right: 20, bottom: 30, left: 50},
    width = 1500 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom;

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var valueline = d3.line()
    .x(function(d) { return x(new Date(d.t)); })
    .y(function(d) { return y(d.y); });

var svg = d3.selectAll(".graph-n")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

x.domain(d3.extent(data, function(d) { return new Date(d.t); }));
y.domain([0, d3.max(data, function(d) { return d.y; })]);

svg.append("path")
    .attr("class", "line")
    .attr("d", valueline);

svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

svg.append("g")
    .call(d3.axisLeft(y));
</script>

我的问题是：在选择每个SVG元素时，如何调用其自身data-stuff属性中存储的数据？此外，当前的实现方式是否有误？是否存在更优的实现方案？

一、调用每个SVG自身的data-stuff数据 #

要获取每个SVG元素专属的data-stuff数据，你可以借助D3的遍历或数据绑定能力，针对每个元素单独处理：

• 方式一：用.each()遍历元素
  这是最直观的方式，遍历每个.graph-n元素时，读取当前元素的属性并解析：

  d3.selectAll(".graph-n").each(function() {
    // 这里的this指向当前遍历到的SVG DOM元素
    const currentSvg = d3.select(this);
    // 读取属性并解析JSON字符串为对象数组
    const rawData = currentSvg.attr("data-stuff");
    const elementData = JSON.parse(rawData);
    
    // 接下来就可以用elementData来生成当前SVG的图表了
  });
  

• 方式二：用.data()绑定元素专属数据
  更符合D3数据流思想的写法，通过函数为每个元素绑定自己的解析后数据：

  const svgSelection = d3.selectAll(".graph-n")
    .data(function() {
      // 每个元素返回自己的解析后数据（用数组包裹符合D3数据绑定要求）
      return [JSON.parse(d3.select(this).attr("data-stuff"))];
    });
  

  后续操作svgSelection时，就可以通过回调函数的d参数直接访问当前元素的专属数据。

二、当前实现的问题 #

你的现有代码存在几个关键问题：

• 未关联元素专属数据：代码中直接使用的data变量没有和每个SVG的data-stuff绑定，要么会导致所有图表共用一份未知数据，要么直接报错（因为data未定义）。
• 全局比例尺冲突：所有图表共用同一套x、y比例尺，但不同SVG的data-stuff数据范围可能不同，会导致图表显示异常。
• 重复计算冗余：多次调用new Date(d.t)，没有提前预处理数据，造成不必要的性能损耗。

三、更优的实现方案 #

下面是重构后的完整代码，遵循D3最佳实践，保证每个图表独立且可维护：

<!-- 示例SVG元素 -->
<svg class="graph-n" data-stuff='[{"t":"2023-01-01","y":10},{"t":"2023-01-02","y":20},{"t":"2023-01-03","y":15}]'></svg>
<svg class="graph-n" data-stuff='[{"t":"2023-01-01","y":5},{"t":"2023-01-02","y":15},{"t":"2023-01-03","y":25}]'></svg>

<script>
// 定义通用配置
const margin = { top: 20, right: 20, bottom: 30, left: 50};
const width = 1500 - margin.left - margin.right;
const height = 350 - margin.top - margin.bottom;

// 预处理数据：统一转换日期格式、确保数值类型正确
function preprocessData(rawData) {
  return rawData.map(item => ({
    t: new Date(item.t),
    y: +item.y // 转换为数字类型，避免字符串干扰计算
  }));
}

// 遍历每个SVG，独立生成图表
d3.selectAll(".graph-n")
  .each(function() {
    const svg = d3.select(this);
    // 读取并预处理当前元素的数据
    const rawData = JSON.parse(svg.attr("data-stuff"));
    const chartData = preprocessData(rawData);

    // 设置SVG基础尺寸
    svg.attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom);

    // 创建主容器组
    const container = svg.append("g")
      .attr("transform", `translate(${margin.left}, ${margin.top})`);

    // 基于当前图表数据计算比例尺
    const xScale = d3.scaleTime()
      .domain(d3.extent(chartData, d => d.t))
      .range([0, width]);

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(chartData, d => d.y)])
      .range([height, 0]);

    // 创建线条生成器
    const lineGenerator = d3.line()
      .x(d => xScale(d.t))
      .y(d => yScale(d.y));

    // 添加折线
    container.append("path")
      .attr("class", "line")
      .attr("d", lineGenerator(chartData));

    // 添加X轴
    container.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(xScale));

    // 添加Y轴
    container.append("g")
      .call(d3.axisLeft(yScale));
  });
</script>

这个方案的优势：

• 独立性：每个图表基于自身数据生成，互不干扰，适配不同数据范围。
• 可维护性：通用配置和预处理逻辑抽离，后续修改样式或数据处理规则更方便。
• 性能优化：提前完成数据类型转换和日期处理，避免重复计算。
• 逻辑清晰：遵循D3的元素遍历+独立渲染思路，代码可读性更高。

内容的提问来源于stack exchange，提问作者user6690342