將SVG附加到DOM不起作用-重新加載資產管道？

Question

我在Asset Pipeline中有JavaScript，這些JavaScript與特定視圖上的特定DOM元素進行交互。 例如：

# app/assets/javascripts/book.js
...
var svg = d3.select("#book").append("svg")
...

我的視圖/pages/book看起來像：

<% content_for :head do %>
  <%= javascript_include_tag 'd3' %>
<% end %> 
<h1>Book</h1>
<div id="book"></div>
<% content_for :body do %>
  <%= javascript_include_tag 'book' %>
<% end %>

我的assets.rb具有：

Rails.application.config.assets.precompile += %w( d3.js )
Rails.application.config.assets.precompile += %w( book.js )

當我去到localhost:3000/pages/book它完美的作品中， SVG結合到#book

當我從root localhost:3000並遵循鏈接<%= link_to "See Book", pages_book_path %> ，DOM元素存在， HTML呈現，但是SVG不會綁定到#book 。

在終端中查看，當我直接轉到localhost:3000/pages/book ，資產管道已加載，並且javascript正確執行。 當我從root開始時，發生了同樣的事情，但是由於#book在root視圖上不存在，所以什么也沒有發生……而當我跟隨鏈接時，資產管道不會重新加載……

跟隨鏈接后，如何重新加載資產管道？

Answer 1

你需要確保你的JavaScript代碼的資產被包裹在一個jQuery頁面ready和page:load是這樣的：

$(document).on('ready page:load', function () {
  var svg = d3.select("#book").append("svg")
});

我相信這應該歸咎於Turbo鏈接，並且像您所說的#book ，在#book之前運行附加到#book代碼。 為了使它在您訪問該頁面時運行，我想上面的內容對您來說很有效。

更新：

如果您嘗試嵌入svg，則那里有一些寶石和自定義方法。 我在網上搜索2分鍾后發現了這四個來源，因此您可能會遇到更好的東西，這可能會為您提供所需的東西。 我將從這里開始：

• jQuery的追加不適用於SVG元素？
• https://github.com/jamesmartin/inline_svg
• https://robots.thoughtbot.com/organized-workflow-for-svg
• https://coderwall.com/p/d1vplg/embedding-and-styling-inline-svg-documents-with-css-in-rails