gadfly361 / rid3 Goto Github PK

Hi,
I try to run your pie example with cljs compiler with advanced optimizations turned on but the pie misses labels. When trying with figwheel in development mode, I do not have any problems.

It seems some functions are optimized away by cljs compiler when optimizations turned on. I tried to include cljsjs/d3 dependency and require cljsjs.d3 namespace but I could not get it to work with optimizations for the pie example.

I believe the problem is caused by (.centroid label d) in text-label function.

Hello,

The library is really good. However, I get into performance issue. I am trying to implement some behavior using the voronoi layout.

Say you have 10 000s of points and you want to make one point bigger, then given the actual API, I did not manage to only update the requested point, and the library always recompute everything.

Would you have a solution for that problem?

Best regards,
David

Thank you for this library, it makes it a little less painful to integrate d3 into reagent. Any chance you could add support for setting an element id for the pieces as well. When you are doing a lot interactive graphs, seems like the only reasonable way to target the (mouse) event handlers (on the overlays) are with an element selector. Would be nice if you could set the id in the map the same way as for the main container instead of:
`
;:id "focus"

:did-mount (fn [node _] (.attr node "id" "focus"))
`

Maybe this is a d3 thing (I'm not very familiar with d3), but I was pretty stumped for a while before I figured out that the data passed to the vis, to be used for :elem-with-data elements must be nested in a k-v pair, with the key being ":dataset".

Maybe it would be good to add this to the docs, or instead, to be able to declare which key the data is in, somewhere in the vis options.

Cheers!

You could create an interactive article demonstrating the power of rid3 using the Klipse plugin.

Here is a demo of how to create interactive reagent snippets with Klipse.

Hey I'm just getting started with this library with my project at kovasap/reddit-tree@09a4cd0. I'm getting these errors in my console when trying to run npx shadow-cljs watch app:

I've installed d3 with npm install d3, and it looks like it's present in my node_modules. Any ideas what I might be doing wrong here?

I would like to be able to add arrows heads to lines. The way this is normally done in SVG is by defining a in the tag and then use an attribute marker-start or marker-end with the line to add this arrow head.

Is this possible with this library?

I've been playing around with on-the-fly D3 vizualizations: Changes to data are announced by server via a WebSocket notification. Upon receiving the notification, clients may download a fresh dataset, and update their vizualization.

The WebSocket needs to be opened at some point while initializing/mounting the viz component, and also needs to be closed when unmounting. I have been able to do this by wrapping rid3/viz into another component to manage the WS state, but it feels like a slight bodge.

It seems more lifecycle hooks, say for the :svg element would make these need-cleanup scenarios easier. However, while pondering whether the whole WebSocket idea is not overly complicated, I started to wonder if the lack of said hooks was not intentional.

So basically:

1. I'm seeking your thoughts on adding more top-level lifecycle methods (in :svg hash-map most likely), and
2. if that seems like something rid3 would benefit from, I may cook up some patches.

the demo's index.html is inside of resources/public; however, it should be somewhere else .. like dev-resources/public to avoid a downstream user unexpectedly seeing rid3's demo index.html

Working off of your scatterplot example

I want to be able to add click and hover events to the individual nodes

additionally, I'd like to be able to change the color of the node based on it's cy position

can you point me to resources on this

{:kind            :elem-with-data
           :class           "dots"
           :tag             "circle"
           :prepare-dataset prepare-dataset
           :did-mount
           (fn [node ratom]
             (let [y-scale (->y-scale ratom)
                   x-scale (->x-scale ratom)]
               (rid3-> node
                       {:cx   (fn [d]
                                (let [label (gobj/get d "label")]
                                  (x-scale label)))
                        :cy   (fn [d]
                                (let [value (gobj/get d "value")]
                                  (y-scale value)))
                        :r    4
;;; on-mouse-enter: etc

                        :fill  
;;; (if (= (gobj/get ??? "value) 0)) "nocolor" 
"#3366CC"})))}

``

Firstly I'd like to say this library is great!

I'm just not sure how to hook in something like the d3 force simulation?

I've been trying to use the example code to get an idea of how this works, but I'm pretty stumped.
The state sim appears to initialise properly, but normally you use the tick to set the values of cx and cy values of the circles, but I've been trying to not directly mutate the dom. My current approach is to try and swap the values in the nodes/edges within the simulation?

(defn ->dots [did-mount?]
  (let [state (atom {:simulation
                     (.. js/d3
                        forceSimulation
                        (force "link" (.. js/d3 forceLink (id #(.id %)) (distance 120) (strength 1)))
                        (force "charge" (.. js/d3 forceManyBody (strength #(identity -30))))
                        (force "center" (.. js/d3 (forceCenter (/ 200 2) (/ 200 2))))
                      )})
    ]
    (.log js/console "d3:" (get @state :simulation))
    (fn [node ratom]
      (when did-mount?
        (set! (.-nodes (get @state :simulation)) (prepare-dataset ratom))
        (.on (get @state :simulation) "tick" #(.log js/console "TICK:" % node))
        (.. (get @state :simulation) (alpha 1) (alphaTarget 0) restart))
      (.log js/console "out:" node ratom)
        (rid3-> node
          {:cx 100
          :cy 100
          :r  50
          :sim #(.stringify js/JSON (.-nodes (get @state :simulation)))
          :data (fn [d] (.stringify js/JSON d))
          :title (fn [d] (or (gobj/get d "label") (gobj/getKeys d)))}))))

(defn prepare-dataset [ratom]
  (-> @ratom
    (#(map (fn [m] (into {} (for [[k v] m] [(str k) v]))) %))
      clj->js))

[rid3/viz
            {:id    "some-id"
            :ratom display
            :svg   {:did-mount (fn [node ratom]
                                  (rid3-> node
                                          {:width  400
                                           :height 400
                                           :style  {:background-color "white"}}))}
            :pieces [
              {:kind      :elem-with-data
               :class     "dots"
               :tag       "circle"
               :prepare-dataset prepare-dataset
               :did-mount  (->dots true)
               :did-update (->dots false)}
              ]
            }]