我一直在尝试在Rails 7中使用D3,遵循alpha release video中的步骤。我知道这只是一个预发布版,但问题是如何在Rails 7中使用D3。当我检查浏览器时,SVG被创建,但网络选项卡没有列出D3包,这(我认为)意味着它没有导入。以下是我添加到应用程序文件中的内容:
**application.html.erb**
<%= javascript_importmap_tags %>
**importmap.rb**
pin "d3", to: "https://esm.sh/d3?bundle"
**application.js**
import "components"
import "components/d3_component"
//= require jquery3
//= require d3
**view.html.erb**
<svg width = '300' height = '200'><svg>
**d3_component.js**
import { select, zoom } from 'd3';
const data = {
nodes: [
{id: 1, x: 100, y: 50},
{id: 2, x: 50, y: 50},
{id: 3, x: 150, y: 50},
],
links: [
{source: 1, target: 2},
{source: 1, target: 3},
]
};
const svg = select('svg');
const g = svg.append('g');
const handleZoom = (e) => g.attr('transform', e.transform);
const zooming = zoom().on('zoom', handleZoom);
select('svg').call(zooming);
....
任何帮助都将不胜感激。谢谢。
2条答案
按热度按时间xdnvmnnf1#
仅供参考,对我有效的是将
<script src="https://d3js.org/d3.v6.js"></script>
添加到application.html.erb
lymnna712#
别忘了把目录
字符串
在application.js上,你只需要导入组件而不是文件夹:
型
使用脚本进行导入将违背DHH试图在视频中显示的内容...