无法使 CustomSVGSeries 在 clojurescript 中工作

Question

我正在尝试用 clojurescript (https://uber.github.io/react-vis/documentation/series-reference/custom-svg-series) 翻译这个例子：

const myData = [
  {x: 1, y: 10, customComponent: 'circle', size: 10},
  {x: 1.7, y: 12, size: 20, style: {stroke: 'red', fill: 'orange'}},
  {x: 2, y: 5},
  {x: 3, y: 15},
  {x: 2.5, y: 7, customComponent: (row, positionInPixels) => {
    return (
      <g className="inner-inner-component">
        <circle cx="0" cy="0" r={10} fill="green"/>
        <text x={0} y={0}>
          <tspan x="0" y="0">{`x: ${positionInPixels.x}`}</tspan>
          <tspan x="0" y="1em">{`y: ${positionInPixels.y}`}</tspan>
        </text>
      </g>
    );
  }}
]

我从这个开始：

[:> rvis/CustomSVGSeries {:data [{:x 300 :y 4000 :size 30
                                  :customComponent (fn [row position-in-pixels]
                                      [:g
                                        [:text {:x 0 :y 0}
                                           [:tspan {:x 0 :y 0} "Hidrógeno"]]])}]}]

但是我得到这个错误：

The above error occurred in the <g> component:
    in g
    in g
    in AbstractSeries
    in svg
    in div
    in XYPlot
    in div
    in FlexibleXYPlot (created by lopezsolerluis.annie_web.line_chart)
    in div (created by lopezsolerluis.annie_web.line_chart)
    in lopezsolerluis.annie_web.line_chart (created by lopezsolerluis.annie_web.app_scaffold)
    in div (created by lopezsolerluis.annie_web.app_scaffold)
    in lopezsolerluis.annie_web.app_scaffold

Consider adding an error boundary to your tree to customize error handling behavior.

和

Uncaught Error: Objects are not valid as a React child (found: object with keys {ns, name, fqn, _hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.
    in g
    in g
    in AbstractSeries
    in svg
    in div
    in XYPlot
    in div
    in FlexibleXYPlot (created by lopezsolerluis.annie_web.line_chart)
    in div (created by lopezsolerluis.annie_web.line_chart)
    in lopezsolerluis.annie_web.line_chart (created by lopezsolerluis.annie_web.app_scaffold)
    in div (created by lopezsolerluis.annie_web.app_scaffold)
    in lopezsolerluis.annie_web.app_scaffold

快把我逼疯了...

Answer 1

用 reagent.core/as-element 将 [:g ...] 包裹在 :customComponent 中。

:customComponent 应该是一个 returns React 元素的函数。 JSX 在转译时将其 <...> 转换为 React 元素。但是对于 Hiccup 向量，您必须通过调用 reagent.core/as-element.

手动完成

无法使 CustomSVGSeries 在 clojurescript 中工作

Can't make CustomSVGSeries work in clojurescript

clojurescript

react-vis