D3组件未在Rails 7中显示

ccgok5k5  于 12个月前  发布在  其他
关注(0)|答案(2)|浏览(163)

我一直在尝试在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);

....

任何帮助都将不胜感激。谢谢。

xdnvmnnf

xdnvmnnf1#

仅供参考,对我有效的是将<script src="https://d3js.org/d3.v6.js"></script>添加到application.html.erb

lymnna71

lymnna712#

别忘了把目录

  • importmap.rb*
pin_all_from "app/javascript/components", under: components"

字符串
在application.js上,你只需要导入组件而不是文件夹:

  • application.js*
import "components/d3_component"


使用脚本进行导入将违背DHH试图在视频中显示的内容...

相关问题