WinJS + Toolbar + DropDown List

http://stackoverflow.com/questions/34808708/can-a-select-drop-down-list-be-added-to-my-winjs-toolbar-via-javascript/35600683?noredirect=1#comment58888444_35600683

by A B Jones

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/css/ui-light.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/base.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/ui.min.js"></script>
<div id="viz"></div>

CSS

body {
  background-color: #404040;
}

.node {
  opacity: 0.9;
}

.node:hover {
  opacity: 1;
}

.link {
  stroke: #999;
}

@-webkit-keyframes shakeme {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(2deg);
  }
  50% {
    -webkit-transform: rotate(-2deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

JavaScript

var width = 700,
  height = 400;

var fill = d3.scale.category10();

var nodes = [],
  foci = {
    x: 300,
    y: 100
  };

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var force = d3.layout.force()
  .nodes(nodes)
  .links([])
  .linkDistance(60)
  .gravity(0)
  .charge(-30)
  .size([width, height])
  .on("tick", tick);

var node = svg.selectAll("circle");
var links = force.links();
var link = svg.selectAll('.link');
var angle = 0;


function tick(e) {

var radius = 100;

  node
    .attr("cx", function(d) {
     if(d.angle>(2*Math.PI)){
    d.angle=0;
    }
    console.log(Math.PI)
    d.x = foci.x + radius *Math.cos(d.angle)
   
      return d.x;
    })
    .attr("cy", function(d) {
    d.y = foci.y + radius *Math.sin(d.angle)
      return d.y;
    });
    
    node.each(function(d){
    d.angle+=0.01;
    })

  link
    .attr("x1", function(d) {
      return d.source.x;
    })
    .attr("y1", function(d) {
      return d.source.y;
    })
    .attr("x2", function(d) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    });
}

function restart() {

  link = link.data(links);
  link.enter().insert("line", ".node")
    .attr("class", "link");


  node = node.data(nodes);
  node.enter().append("circle")
    .attr("class", "node")
    .attr("cx", function(d) {
			d.angle = 0;
      return d.x;
    })
    .attr("cy", function(d) {
      return d.y;
    })
    .attr("r", 10)
    .style("fill", function(d) {
      return (1 < 5) ? d3.rgb(85, 187, 51) : d3.rgb(60, 100, 187)
    })
    .style("stroke", function(d) {
      return ((1 < 5) ? d3.rgb(85, 187, 51) : d3.rgb(60, 100, 187)).darker(2);
    })
    .attr("transform",function(d){ return "translate(" + d.x + "," + d.y + ")" })
    .call(force.drag);


  force.start()

}


nodes.push({
  id: 0,
  x:20,
  y:30
});
nodes.push({
  id: 0,
  x:40,
  y:60
});
nodes.push({
  id: 0,
  x:80,
  y:10
});
links.push({
  source: 0,
  target:...