代码之家 › 专栏 › 技术社区 › Chris Murphy

d3 JavaScript转换为ClojureScript

clojurescript-javascript-interop clojurescript

1

Chris Murphy · 技术社区 · 6 年前

我要将以下JavaScript转换为ClojureScript:

var myScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 600]);

创建此函数后,您应该能够用数字调用它:

myScale(3);   // returns 180

我的尝试如下:

(:require ["d3-scale" :refer (scaleLinear)])

(let [f (-> scaleLinear
            (. (domain (clj->js [0 10])))
            (. (range (clj->js [0 600]))))]
      (f 3))

给予:

react dom.development.js:16545 Uncaught TypeError:module$node_modules$d3_scale$dist$d3_scale.scaleLinear.domain不是函数

2 回复 | 直到 6 年前

1

3

Chris Murphy 6 年前

scaleLinear 是一个可以从 d3 . 它不是应该被建造的东西。所以这是一个更好的答案:

(-> d3
    (.scaleLinear)
    (.domain #js [min-y max-y])
    (.range #js [1 0]))

我的要求有问题,所以这里有相关的要求:

["d3" :as d3]
["d3-scale" :refer (scaleLinear)]

这是使用shadowcljs而不是cljsjs。

需要“d3”的问题是你把整个库都拉进来了。所以下面是另一种方法:

(-> (scaleLinear)
    (.domain #js [min-y max-y])
    (.range #js [1 0]))

似乎每当你需要什么东西的时候,你都可以直接使用它,而忘记了互操作点。

阿尔索 (:require ["d3" :as d3]) 意味着你把d3拉到本地范围。 js/d3 是全局范围,所以使用 d3号 如果这是你所需要的。即 js 是另一个你可以忘记的“互操作”。

另一方面 domain 和 range 不需要,因此需要遵守互操作规则。

总之,解决的主要问题是 鳞片状 是一个函数,因此实际上需要调用!

这个问题是在探索如何通过React Vis-see使用d3时提出的 https://medium.com/@cjmurphy/using-react-vis-from-clojurescript-787d02281f7c

2

1

Chris Murphy 6 年前

经过反复试验,我终于成功了。这些都是等效的:

(-> (new scaleLinear)
    (.domain (clj->js [0 10]))
    (.range (clj->js [0 600])))

(-> (new scaleLinear)
    (. (domain (clj->js [0 10])))
    (. (range (clj->js [0 600]))))

(-> (scaleLinear.)
    (.domain #js [0 10])
    (.range #js [0 600]))