使用 JavaScript 函数将 div ID 传递给多个 d3 图表，提高可扩展性和可维护性

使用 JavaScript 函数将 div ID 传递给多个 d3 图表

问题陈述

在使用 Rails 7 通过不同的 div（或 svg）id 显示页面上的多个 d3 图表时遇到困难。

解决方法

为了解决此问题，我们将：

• 创建必要的视图文件
• 定义接受 div id 作为参数的 JavaScript 函数
• 将图表函数导入主应用程序 JavaScript 文件
• 在视图文件中调用图表函数

详细步骤：

1. 创建必要的视图文件

在 view.html.erb 文件中，使用 content_tag 创建一个具有唯一 ID 的 svg 容器：

<%= content_tag "svg", class: 'chart', id: raw(chart_type)+'_'+raw(chart_num), data: {chart_type: chart_type, chart_num: chart_num} do %>
<script>
    line('#<%= chart_type %><%= chart_num %>');
</script>
<% end %>

2. 定义 JavaScript 函数

在 javascript/component/charts/line.js 文件中，定义一个名为 line 的函数，接受 div id 作为参数：

function line(chart_id) {

    // 创建 SVG 容器并设置属性
    const svg = d3.select(`#${chart_id}`)
        .attr('width', 400)
        .attr('height', 400)
        .style('background-color', 'black');

    // 添加线元素
    svg.append('path')
        .style("stroke", "lightgreen")
        .style("stroke-width", 10)
        .attr("x1", 0)
        .attr("y1", 0)
        .attr("x2", 200)
        .attr("y2", 200);
}

3. 导入图表函数

在 application.js 文件中，导入 line 函数：

import "components/charts/line"

4. 调用图表函数

在 view.html.erb 文件中，在 script 标签内，调用 line 函数，并将 svg 容器的 id 作为参数传递：

<script>
    line('#<%= chart_type %><%= chart_num %>');
</script>

总结

通过遵循这些步骤，你可以使用 JavaScript 函数将 div id 传递给多个 d3 图表。这让你可以更灵活地管理和更新页面上的图表，提高了可扩展性和可维护性。

常见问题解答

1. 为什么要使用 JavaScript 函数传递 div ID？

这可以将图表逻辑与 HTML 标记分开，提高代码的可重用性。它还允许你动态创建图表，而不必为每个图表手动编写 HTML。

2. 有没有其他方法传递 div ID？

另一种方法是使用 CSS 选择器或数据属性来获取 div ID，但 JavaScript 函数提供了一个更灵活和动态的方式来做到这一点。

3. 如何使用不同的数据源创建图表？

你可以修改 line 函数以接受一个包含图表数据的数据源参数。

4. 如何自定义图表的外观和行为？

可以通过更改 line 函数中的样式和属性来自定义图表的外观和行为。

5. 如何处理多个图表同时出现的问题？

可以根据需要重复使用 line 函数多次，每个函数都具有自己的 div ID。这将创建多个同时显示的图表。