d3.js を使用して JSON 構造からいくつかのグリッドを描画しようとすることで、Clojurescript がどのように機能するかを学んでいます。ストロークを使用してd3 にアクセスしています。
JSON は次のようになります。
[[{"players":{"0":{"rep":0},"1":{"rep":0}}},{"players":{"0":{"rep":0},"1":{"rep":0}}},
{"players":{"0":{"rep":0},"1":{"rep":0}}},{"players":{"0":{"rep":0},"1":{"rep":0}}}],
[{"players":{"0":{"rep":0},"1":{"rep":0}}},{"players":{"0":{"rep":0},"1":{"rep":0}}},
{"players":{"0":{"rep":0},"1":{"rep":0}}},{"players":{"0":{"rep":0},"1":{"rep":0}}}],
[{"players":{"0":{"rep":0},"1":{"rep":0}}},{"players":{"0":{"rep":0},"1":{"rep":0}}},
{"players":{"0":{"rep":0},"1":{"rep":0}}},{"players":{"0":{"rep":0},"1":{"rep":0}}}],
[{"players":{"0":{"rep":0},"1":{"rep":0}}},{"players":{"0":{"rep":0},"1":{"rep":0}}},
{"players":{"0":{"rep":0},"1":{"rep":0}}},{"players":{"0":{"rep":0},"1":{"rep":0}}}]]
これは 4 x 4 のグリッドを表します。高さ、幅、x、y 座標などの値をセルに追加しようとしているので、データを d3 に渡して描画するという単純なケースになります。
たとえば、次のようになります。
[[{"width":32,"height":32,"x":0,"y":0,"value":{"players":{"0":{"rep":0},"1":{"rep":0}}}},
{"width":32,"height":32,"x":32,"y":0,"value":{"players":{"0":{"rep":0},"1":{"rep":0}}}},...
通常、変換関数を使用して構造をマップし、セルを現在の値から新しい形式に変換しますが、このアプローチは機能していないようです。試してみましmap-indexed: (map-indexed #(doto %2 (aset "width" %1)) row)たが、これは値を正しく変換していないようです。値に間違ってアクセスまたは設定している可能性が非常に高いです。
コードの現在の繰り返しは次のようになります。
(defn board->grid [grid-width grid-height board square]
(let [x-length (count board)
y-length (count (first board))
same (min (/ grid-width x-length) (/ grid-height y-length))
grid-item-width (if square same (/ grid-width x-length))
grid-item-height (if square same (/ grid-height y-length))
start-x (/ grid-item-width 2)
start-y (/ grid-item-height 2)
values (array)
grid (array)
data (js->clj board :keywordize-keys true)]
(doseq [x (range x-length)
y (range y-length)]
(let [current-cell (aget data y x)]
(.log js/console (apply str (aset (aget data y x) "a" "b")))
(.push grid (aget data y x))))
(.text ($ :#status) grid)))
どんな助けでも大歓迎です！またはさらに良いことに、より良いアプローチの提案、私はこれについて少し間違っていると感じずにはいられません!