使用 C2 生成 SVG

Question

我有以下代码，旨在将一组设备表示为 SVG：

(ns foo.core
  (:use [c2.core :only [unify]]
        [c2.dom :only [replace! append!]]
        [c2.svg :only [translate]]))
(def conf 
  { :devices [{:alias "OSC Sender",
               :name "OSC Sender",
               :ins []},
              {:alias "const2", :name "const",
               :outs []}],
    :layout [{:alias "const2",
              :x 72.12447405329594,
              :y 99.88499298737729},
             {:alias "tick",
              :x 82.5732819074334,
              :y 133.91374474053296},
             {:alias "OSC Sender",
              :x 185.17741935483872,
              :y 113.90322580645162}]})
(def render-config
  [:svg {:viewBox "0 0 900 400"}
   [:rect {:id "frame" :x "1" :y "1" :width "600" :height "300" :fill "none" :stroke "blue"}]
   (unify (:layout conf)
          (fn [{alias :alias x :x y :y}]
            [:g {:transform (translate [x y])}
              [:text alias]]))])
(append! "#main" render-config)

尝试评估 REPL 中的render-config，我得到：

[:svg {:viewBox "0 0 900 400"} [:rect {:width "600", :y "1", :x "1", :fill "none", :stroke "blue", :id "frame", :height "300"}] ([:g {:transform "translate(72,99)"} [:text "const2"]] [:g {:transform "translate(82,133)"} [:text "tick"]] [:g {:transform "translate(185,113)"} [:text "OSC Sender"]])]

对我来说，这看起来像一个合适的打嗝代表（当然unify发挥了它的魔力）。

然而，在网页上下文中评估render-config时（使用singult），我只得到一个错误。生成一个非常简单的 SVG（基本上只有封闭的"框架"矩形）在浏览器中工作。

有什么提示/技巧吗？

干杯！

注意：使用 Hiccup 渲染render-config，然后在文件中吐出结果会得到 Inkscape 可读的 SVG 图像。

Answer 1

问题是你的unify不是独生子女。在 ClojureScript unify 中，统一具有"确保这里的所有子级都是通过此模板 fn 的这些数据"的语义，而正在发生的事情是 Singult 试图将rect变成g（以匹配模板）。这是荒谬的，这就是它爆炸的原因。如果你包装统一，所以它看起来像

[:g.devices (unify ...)]

你应该没事的。

这在服务器端有效，因为那里unify被视为map。