title: How do you label nodes and create arrows in D3?
body: <p>I want the nodes to have labels, and the lines to be arrows pointing to the edge of the nodes. And I also want the weight to be on the edges. I am new to D3 and having troubles finding examples to do so. Most of the example graphs are force directed, or creating a directing graph. I wanted to make a kind of a path diagram that is NOT interactive at all. </p>
  
  <p>Basically, I want the source node to point to the target nodes. I just want to draw this graph in d3. I feel like this is really simple, but I just can't seem to figure it out. Any suggestions? </p>
  
  <pre><code>&lt;div id="graph"&gt;
  &lt;script&gt;
  
  var vis = d3.select("#graph")
              .append("svg")
              .attr("width", 1000)
              .attr("height", 1000);
  
  var nodes = [
     {label: "Social Dominance", x: 300, y:400},
     {label: "Gender Identification", x: 500, y: 200},
     {label: "Hostile Sexism", x:500, y:600},
     {label: "Collactive Action", x:700, y:400}
  
     ], 
      edges =[
     {source: nodes[0], target: nodes[1], weight: 0},
     {source: nodes[0], target: nodes[2], weight: 0},
     {source: nodes[0], target: nodes[3], weight: 0},
     {source: nodes[1], target: nodes[3], weidht: 0},
     {source: nodes[2], target: nodes[3], weight: 0}
     ];
  
  vis.selectAll("circle.nodes")
       .data(nodes)
       .enter()
       .append("svg:circle")
       .attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; })
       .attr("r", "60px")
       .attr("fill", "pink");
  
  
  vis.selectAll("line")
      .data(edges)  
      .enter()
      .append("line")
      .attr("id", function(d,i){return 'edge'})
      .attr('marker-end', 'url(#arrowhead)')
      .style("stroke", "#ccc");
  
  vis.selectAll(".nodelabel")
      .data(nodes)
      .enter()
      .append("text")
      .attr({"cx":function(d){return d.x;},
                "cy":function(d){return d.y;},
                "class":"nodelabel",
                "stroke":"black"})
      .text(function(d){return d.name;});
  
  vis.selectAll(".edgepath")
          .data(edges)
          .enter()
          .append('path')
          .attr({'d': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
                 'class':'edgepath',
                 'fill-opacity':100,
                 'stroke-opacity':100,
                 'fill':'blue',
                 'stroke':'black',
                 'id':function(d,i) {return 'edgepath'+i}});
  
  vis.append('defs').append('marker')
      .attr({'id':'arrowhead',
              'viewBox':'-0 -5 10 10',
              'refX':25,
              'refY':0,
          //'markerUnits':'strokeWidth',
              'orient':'auto',
              'markerWidth':100,
              'markerHeight':100,
              'xoverflow':'visible'})
      .append('svg:path')
          .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
          .attr('fill', '#ccc')
          .attr('stroke','#ccc');
  
  &lt;/script&gt;
  &lt;/div&gt;  
  </code></pre>