title: Force chart d3.js inside a triangle
body: <p>I'm studying d3.js force chart and I have a question. <strong>Is it possible to make a force chart inside a triangle with some coordinates?</strong></p>
  
  <p>Here is my code: </p>
  
  <pre><code>var width = 500;
  var height = 500;
  //margin
  var marginLeft = 10;
  var marginTop = 10;
  var marginRight = 10;
  var marginBottom = 10;
  var margin = { left: marginLeft , top: marginTop, right: marginRight, bottom: marginBottom};
  
  //size of canvas
  var innerWidth = width - margin.left - margin.right;
  var innerHeight = height - margin.top - margin.bottom;
  
  var radius = 10;
  
  var svg = d3.select(".forcechart").append("svg")
      .attr("width", width) 
      .attr("height", height)
      .style("background", "#eee");
  
  var tr = svg.append("polygon")       // attach a polygon
      .style("stroke", "black")  // colour the line
      .style("fill", "none")     // remove any fill colour
      .attr("points", "250,0, 12,173,  250,250");  // x,y points 
  
  var group = svg.append("g")
      .attr("transform",  "translate(" + margin.left + "," + margin.top + ")");
  
  var graph = {
      "nodes": [  { "x": 0, "y": 0 },
                  { "x": 100,  "y":  100 },
                  { "x": 500, "y": 500 },
                       { "x": 300, "y": 0 },
                     { "x": 300, "y": 0 },
                    { "x": 100,  "y":  100 },
                  { "x": 500, "y": 500 },
                       { "x": 300, "y": 0 },
                     { "x": 300, "y": 0 },
                    { "x": 100,  "y":  100 },
                  { "x": 500, "y": 500 },
                       { "x": 300, "y": 0 },
                     { "x": 300, "y": 0 },
                    { "x": 100,  "y":  100 },
                  { "x": 500, "y": 500 },
                       { "x": 300, "y": 0 },
                     { "x": 300, "y": 0 },
                    { "x": 100,  "y":  100 },
                  { "x": 500, "y": 500 },
                       { "x": 300, "y": 0 },
                     { "x": 300, "y": 0 },
              ],
      "links": []
      };
  
  
  var nodes = graph.nodes,
      links = graph.links;
  
  var force = d3.layout.force()
      .size([innerWidth, innerHeight])
      .nodes(nodes)
      .links(links);
  
  force.linkDistance(100);
  force.charge(-200);
  
  var link = group.selectAll('.link')
      .data(links)
      .enter().append('line')
      .attr('class', 'link');
  
  var node = group.selectAll('.node')
      .data(nodes)
      .enter().append('circle')
      .attr('class', 'node');
  
  force.on('tick', function() {
      node.attr('r', radius)
          .attr('cx', function(d) { return d.x; })
          .attr('cy', function(d) { return d.y; });
  
      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; });
  
  });
  
  
  force.start();
  </code></pre>
  
  <p>Full code is here: <a href="http://codepen.io/Balzzac/pen/vGWXdQ" rel="noreferrer">http://codepen.io/Balzzac/pen/vGWXdQ</a>. Now it is a force chart inside "group", I need to make it is inside triangle "tr" so no one node is outside of boundaries of my triangle.</p>
  
  <p>Thanks for help!</p>
  
  <p>PS Sorry for my English =)</p>