JSFiddle - React, Tailwind, and code Playground

by Yoshiharu Kamata

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.min.js"></script>

CoffeeScript

colors = ["red","blue","green","yellow","orange","aqua"]
class Node
  width: 40
  height: 40
  rx: 6
  ry: 6
  stroke: "gray"
  constructor: (options)->
    @x = options.x
    @y = options.y
    @id = _.uniqueId()
    @key = "k#{_.random(1,6)}"
    @fill = _.sample(colors)
    
class Nodeset
  num: 9
  constructor: ->
    @items = _.times @num, (i)-> 
      new Node
        x: 10+(i%3)*120
        y: 10+Math.floor(i/3)*120

  groupBy: ->
    _.groupBy @items, "key"
  toObject: ->
    _.reduce @items, (memo, item)->
      memo[item.id] = item
      memo
    , {}
    
  transStart: (other)->
    
    group = other.groupBy()
    keys = _.keys group
    objects = other.toObject()
    
    _(@items).select (item)->
      _.include keys, item.key
    .map (item)->
      _.times _.size(group[item.key]), (i)->
        clone = _.clone item
        clone.from =
          offset: i
        clone.toId = group[item.key][i].id
        clone.id = "#{clone.id}-move-#{i}"
        clone
    .flatten()
    .groupBy("toId")
    .map (items, id)->
      _.map items, (item, i)->
        to = objects[id]
        item.to =
          x: to.x
          y: to.y
          offset: i  
        item
    .flatten()  
    .valueOf()

  transEnd: (other)->

console.log "a"
dataset = new Nodeset
console.log dataset, dataset.groupBy()
data2 = new Nodeset
console.log "trans=", dataset.transStart(data2), data2