D3 Examples - My Custom Shapes

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script type="text/javascript">
    // Feel free to change or delete any of the code you see in this editor!
​
    var nodes1 = [
  {NodeType: "square", x:50, y:50,  height:50, width: 50, fill: "red"},
  {NodeType: "square",   x:50, y:125, height:50, width: 50, fill: "green"}, 
  {NodeType: "triangle",   x:50, y:200, height:50, width: 50, fill: "blue"}];
    
    var nodes2 = [
  {NodeType: "square",   x:50, y:125, height:50, width: 50, fill: "green"}, 
  {NodeType: "triangle",   x:50, y:200, height:50, width: 50, fill: "blue"}];
   var shapeDefs = {square: function(height,width)
                                {
     
                                
                                var output =  d3.path();
                    output.moveTo(0, height);
                    output.lineTo(width, height);
                    output.lineTo(width, 0);
                    output.lineTo(0,0);
                    return(output)
                                    }
    
                  
                 ,
                 triangle: function(height,width)
                                {
     
                                
                    var output =  d3.path();
                    output.moveTo(0, height);
                    output.lineTo(width, height);
                    output.lineTo(0,0);
                    output.lineTo(0,height)
                    return(output)
                                                                    }
    
                  
                 
    };
    
    
    
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);
    
​
                            
    
var render = function(data){
    
      var select = svg.selectAll('path')
                            .data(data);
    
        var enter = select.enter()
                        .append('path')
                    .merge(select)
                        .attr('d', function(d){return shapeDefs[d.NodeType](d.width, d.height);})
                        .attr('stroke','black')
                        .attr('fill', d => {return(d.fill)})
                        .attr('transform',function(d){return(`translate(${d.x},${d.y})`);});
                    
    enter.exit().remove();
​
}
​
render(nodes1);
render(nodes2);    
​
  </script>
</body>
​
    