Skip to content

Latest commit

 

History

History
96 lines (76 loc) · 3.81 KB

readme.md

File metadata and controls

96 lines (76 loc) · 3.81 KB
Raw

#d3-arrow Small Animated arrow library using D3. It uses a custom d3 build (see .src/custom-d3.js) so it only uses what it needs from d3. The sample.js and index.html are purely used for visual QA.

See it in action

#How to use

###Instantiate the arrow object:

arrow = new d3Arrow.Arrow()

The constructor can take two options:

#Class Methods

constructor(options)

  • options
    • color[string] - (default: black) hex/css color code, controls the color of the drawn arrow.
    • startingArrow[boolean] - (default: false) controls if there is a starting arrow (double ended arrow)
    • parent[string] - (default: html) css selector of the element where the svg arrow is placed. This might need to be set to something other then html if you want arrows to scroll properly

#instance Methods ##drawFrom(selector, options): This method controls where an arrow starts.

  • selector[String] - css selector of the element that the start of the arrow will be bound to.
  • options
    • orientation[top|bottom|left|right] - (default: left) Controls which side of the element the arrow starts from. By default the starting of the arrow will be centered on that side.
    • position[float] - Position indicates where along the given orientation an arrow's start is located. For top and bottom orientations center is 0 while far left is 100, far right is -100. For left and right orientations far top is 100 while far bottom is -100
    • depth[float] - This indicates how far into the element the arrow's starting point is. regardless of side, a positive value for this option will take the arrow start point into the element, while a negative value brings it out of the element.

##drawTo(selector, options): This method controls where an arrow ends.

  • selector[String] - css selector of the element that the end of the arrow will be bound to.
  • options
    • orientation[top|bottom|left|right] - (default: left) Controls which side of the element the arrow ends at. By default the ending of the arrow will be centered on that side.
    • position[float] - (default: 0)Position indicates where along the given orientation an arrow's end is located. For top and bottom orientations center is 0 while far left is 100, far right is -100. For left and right orientations far top is 100 while far bottom is -100
    • depth[float] - (default: 0) This indicates how far into the element the arrow's ending point is. regardless of side, a positive value for this option will take the arrow end point into the element, while a negative value brings it out of the element.
    • visible[boolean] - (default: true) Indicates if an arrow starts out visible or hidden. If you wish to animated the arrow in, this should be set to false to prevent flickering.

##redraw(): This method redraws the arrow using the original options given to drawTo and drawFrom. This is useful for implementing responsive arrows. Example:

var arrow = new d3Arrow.Arrow()
arrow.drawFrom(".box1").drawTo(".box2")

window.onresize = function(){
  arrow.redraw()
}

animateDraw(drawPercent)

This method is used to draw in the arrow.

  • drawPercent[integer] - This value indicates how drawn the arrow is. 0 indicates that the arrow is essentially undrawn and hidden, while 100 is fully drawn. To animate drawing in the arrow simply iterate through values 0-100 and pass them to this method. For example:

    var arrow = new d3Arrow.Arrow()
arrow.drawFrom(".box1").drawTo(".box2", {visible: false})

var animateCount = 0
var timer = window.setInterval(function(){
  arrow.animateDraw(animateCount)

  animateCount += 1
  if(animateCount > 100){
    window.clearInterval(timer)
  }
}, 5)

#todo

  • size scaling
  • svg filters for different arrow looks