title: how to change the color of a link in d3js?
body: <p>here is my code and i want to change the color of my link.
  i have tried so many techniques but no effect. 
  please kindly help me out.
  im using asp.net </p>
  
  <pre><code> &lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="D3js_demo.WebForm1" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head runat="server"&gt;
      &lt;script type="text/javascript" src="http://d3js.org/d3.v2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;Weighted Citation Graph&lt;/title&gt;
       &lt;style&gt;
  
  path.link {
      fill: #ccc;
      stroke: #333;
      stroke-width: 1.5px;
  }   
  
  circle {
      fill: #ccc;
      stroke: #333;
      stroke-width: 1.5px;
  }
  
  text {
      font: 10px sans-serif;
      pointer-events: none;
  }
  
  text.shadow {
      stroke: #fff;
      stroke-width: 3px;
      stroke-opacity: .8;
  }
  
  body {
      background-color: white;
      margin: 0px;
  }
  
  .graphContainer {
      text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
      &lt;script src="//d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
      $(function () {
          var color = d3.scale.category20();
          var data = {
              "nodes": [
                  { "id": 0, "name": "paper1", "citation": 5, "group": 1 },
                  { "id": 1, "name": "paper2", "citation": 8, "group": 2 },
                  { "id": 2, "name": "paper3", "citation": 12, "group": 3 },
                  { "id": 3, "name": "paper4", "citation": 25, "group": 4 },
                  { "id": 4, "name": "paper5", "citation": 15, "group": 5 },
                  { "id": 5, "name": "paper6", "citation": 5, "group": 1 },
                  { "id": 6, "name": "paper7", "citation": 8, "group": 2 },
                  { "id": 7, "name": "paper8", "citation": 12, "group": 3 },
                  { "id": 8, "name": "paper9", "citation": 25, "group": 4 },
                  { "id": 9, "name": "paper10", "citation": 15, "group": 5 }
              ],
              "links": [
                  { "source": 0, "target": 1, "name": "A-B-1", "value": 8 , "grouo": 1},
                  { "source": 0, "target": 1, "name": "A-B-2", "value": 24, "grouo": 2 },
                  { "source": 0, "target": 2, "name": "A-C-1", "value": 100, "grouo": 1 },
                  { "source": 0, "target": 2, "name": "A-C-3", "value": 44, "grouo": 2 },
                  { "source": 2, "target": 3, "name": "A-D-1", "value": 169, "grouo": 1 },
                  { "source": 2, "target": 3, "name": "A-D-2", "value": 80, "grouo": 2 },
                  { "source": 2, "target": 4, "name": "A-E-1", "value": 16, "grouo": 1 },
                  { "source": 2, "target": 4, "name": "A-E-5", "value": 200, "grouo": 2 },
                  { "source": 4, "target": 5, "name": "A-B-1", "value": 8, "grouo": 1 },
                  { "source": 4, "target": 5, "name": "A-B-2", "value": 24, "grouo": 2 },
                  { "source": 5, "target": 6, "name": "A-C-1", "value": 12, "grouo": 1 },
                  { "source": 5, "target": 6, "name": "A-C-3", "value": 44, "grouo": 2 },
                  { "source": 5, "target": 7, "name": "A-D-1", "value": 125, "grouo": 1 },
                  { "source": 5, "target": 7, "name": "A-D-2", "value": 225, "grouo": 2 },
                  { "source": 7, "target": 8, "name": "A-E-1", "value": 36, "grouo": 1 },
                  { "source": 7, "target": 8, "name": "A-E-5", "value": 81, "grouo": 2 },
                  { "source": 8, "target": 3, "name": "A-C-1", "value": 9, "grouo": 1 },
                  { "source": 8, "target": 3, "name": "A-C-3", "value": 16, "grouo": 2 },
                  { "source": 8, "target": 9, "name": "A-D-1", "value": 50, "grouo": 1 },
                  { "source": 8, "target": 9, "name": "A-D-2", "value": 100, "grouo": 2 }
              ]
          };
  
          // used to store the number of links between two nodes. 
          // mLinkNum[data.links[i].source + "," + data.links[i].target] = data.links[i].linkindex;
          var mLinkNum = {};
  
          // sort links first
          sortLinks();
  
          // set up linkIndex and linkNumer, because it may possible multiple links share the same source and target node
          setLinkIndexAndNum();
  
          var w = 960,
              h = 500;
  
          var force = d3.layout.force()
                        .nodes(d3.values(data.nodes))
                        .links(data.links)
                        .size([w, h])
                        .linkDistance(200)
                        .charge(-1000)
                        .on("tick", tick)
                        .start();
  
          var svg = d3.select(".graphContainer").append("svg:svg")
                      .attr("width", w)
                      .attr("height", h);
  
          var path = svg.append("svg:g")
                        .selectAll("line")
                        .data(force.links())
                        .enter().append("svg:path")
                        .attr("class", "link")
                        .style("stroke-width", function (d) { return Math.sqrt(d.value); });
  
  
          var circle = svg.append("svg:g")
                          .selectAll("circle")
                          .data(force.nodes())
                          .enter().append("svg:circle")
                          .attr("r", function (d) { return (d.citation); })
                          .style("fill", function (d) { return color(d.group); })
                          .call(force.drag);
  
          var text = svg.append("svg:g")
                        .selectAll("g")
                        .data(force.nodes())
                        .enter().append("svg:g");
  
          // A copy of the text with a thick white stroke for legibility.
          text.append("svg:text")
              .attr("x", 8)
              .attr("y", ".31em")
              .attr("class", "shadow")
              .text(function (d) { return d.name; });
  
          text.append("svg:text")
              .attr("x", 8)
              .attr("y", ".31em")
              .text(function (d) { return d.name; });
  
          // Use elliptical arc path segments to doubly-encode directionality.
          function tick() {
              path.attr("d", function (d) {
                  var dx = d.target.x - d.source.x,
                      dy = d.target.y - d.source.y,
                      dr = Math.sqrt(dx * dx + dy * dy);
                  // get the total link numbers between source and target node
                  var lTotalLinkNum = mLinkNum[d.source.id + "," + d.target.id] || mLinkNum[d.target.id + "," + d.source.id];
                  if (lTotalLinkNum &gt; 1) {
                      // if there are multiple links between these two nodes, we need generate different dr for each path
                      dr = dr / (1 + (1 / lTotalLinkNum) * (d.linkindex - 1));
                  }
                  // generate svg path
                  return "M" + d.source.x + "," + d.source.y +
                      "A" + dr + "," + dr + " 0 0 1," + d.target.x + "," + d.target.y +
                      "A" + dr + "," + dr + " 0 0 0," + d.source.x + "," + d.source.y;
              });
  
              // Add tooltip to the connection path
              path.append("svg:title")
                  .text(function (d, i) { return d.name; });
  
              circle.attr("transform", function (d) {
                  return "translate(" + d.x + "," + d.y + ")";
              });
  
              text.attr("transform", function (d) {
                  return "translate(" + d.x + "," + d.y + ")";
              });
          }
  
          // sort the links by source, then target
          function sortLinks() {
              data.links.sort(function (a, b) {
                  if (a.source &gt; b.source) {
                      return 1;
                  }
                  else if (a.source &lt; b.source) {
                      return -1;
                  }
                  else {
                      if (a.target &gt; b.target) {
                          return 1;
                      }
                      if (a.target &lt; b.target) {
                          return -1;
                      }
                      else {
                          return 0;
                      }
                  }
              });
          }
  
          //any links with duplicate source and target get an incremented 'linknum'
          function setLinkIndexAndNum() {
              for (var i = 0; i &lt; data.links.length; i++) {
                  if (i != 0 &amp;&amp;
                      data.links[i].source == data.links[i - 1].source &amp;&amp;
                      data.links[i].target == data.links[i - 1].target) {
                      data.links[i].linkindex = data.links[i - 1].linkindex + 1;
                  }
                  else {
                      data.links[i].linkindex = 1;
                  }
                  // save the total number of links between two nodes
                  if (mLinkNum[data.links[i].target + "," + data.links[i].source] !== undefined) {
                      mLinkNum[data.links[i].target + "," + data.links[i].source] = data.links[i].linkindex;
                  }
                  else {
                      mLinkNum[data.links[i].source + "," + data.links[i].target] = data.links[i].linkindex;
                  }
              }
          }
      });
  
  &lt;/script&gt;
  
      &lt;/div&gt;
          &lt;div id="graphContainer" class="graphContainer"&gt;&lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>