title: d3 force layout nodes are pinning on dblick but appearance does not modify
body: <p>Using and playing around with the Les Miserables Json data, I coded from modifications in d3.   I was able to code everything except highlighting/marking a node if it is in the "fixed" state (vs the force graph layout).  When you double click a node, it will freeze, a drag and move will pin it somewhere while all the other nodes (by default) in the force layout.  When you double click the node again, the node is unpinned, and floating in the force layout as usual.  The second thing I wanted to do is that if the node is in a “pinned” state, the node should be a different color, or highlighted somehow.  I tried a few ways within the method chaining, checking with conditional statements for the node state to modify the node features, but they are not working.  I also separated out the dblclick handler as an outside function (which is my current version.</p>
  
  <p>I put my code here of the original attempt within the method chains:
  <a href="http://pastebin.com/SqrqgVET" rel="nofollow">http://pastebin.com/SqrqgVET</a></p>
  
  <p>I also tried another way, using a variable “pinned” to determine the state of the node, within the double-click, to modify the nodes border, and change the state accordingly but that is not changing the node’s appearance either. There is a console.log() statement, and the function is going into the if else portions accordingly.</p>
  
  <p><a href="http://pastebin.com/dzEw42mQ" rel="nofollow">http://pastebin.com/dzEw42mQ</a></p>
  
  <p>Below is the current version.</p>
  
  <p>Any feedback would be great.  Thanks!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  .node {
    cursor: move;
    stroke: #fff;
    stroke-width: 1.5px;
  }
  .node.fixed {
      fill: #f00;
  }
  
     .link {
    stroke: #999;
    stroke-opacity: .6;
  }
  
  &lt;/style&gt;
  
  &lt;head&gt;
  &lt;title&gt;Victor Hugo Had No Internet&lt;/title&gt;
  &lt;script type="text/javascript" src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://d3js.org/colorbrewer.v1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
  
  //Size of region to render on
  var width = 960,
      height = 500;
  
  var color = d3.scale.ordinal()
      .domain([1, 10])
      .range(colorbrewer.BrBG[9]);
  
  //D3 force directed layout
  //Try playing with the charge and link distance
  var force = d3.layout.force()
      .charge(-100)
      .linkDistance(40)
      //.on("tick", tick) //event ADDED
      .size([width, height]);
  
  //Add our canvas
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  
  
  //Select the miserables data ;)
  d3.json("miserables.json", function(error, graph) {
    force
        .nodes(graph.nodes)
        .links(graph.links)
        .start();
  
  //Add the links
    var link = svg.selectAll(".link")
        .data(graph.links)
        .enter().append("line")
        .attr("class", "link")
        .style("stroke-width", function(d) { return Math.sqrt(d.value); });
  
  //Add the nodes
    var node = svg.selectAll(".node")
        .data(graph.nodes)
        .enter().append("circle")
        .attr("class", "node")
        .attr("r", function(d){ return Math.sqrt(d.coolness);})
        .attr("stroke", "#ffffff")
        .on("dblclick", dblclick)
        .call(force.drag)
          .style("fill", function(d) {return color(d.group);}); //});
          //.style("border", 5);//function(d) {
               //if (d.fixed==false) {return 4}; });
  
  
  
  
  
  // node.append("text") //label
   //       .attr("dx", 6)
   //       .attr("dy", ".10em")
   //       .text(function(d) { return d.name; });
  
   //add labels
    var labels = svg.selectAll("text")
          .data(graph.nodes)
          .enter()
          .append("text")
          .attr({"x":function(d){return d.x;},
                "y":function(d){return d.y;}})
          .text(function(d) {
                if (d.coolness&gt;25 &amp;&amp; d.name.length &gt; 6) {return d.name.substring(0,6)+'...'}
                if (d.coolness&gt;25 &amp;&amp; d.name.length &lt; 6) {return d.name}
                else    { return null } ;})
          .call(force.drag);
  
  //Update stuff for animation:
  //   This takes the physics simulation for the force directed graph and
  //   sets the location of the nodes and edges to the new positions
    force.on("tick", function() {
      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; });
  
      node.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
  
      labels.attr("x", function(d) { return d.x; })        
             .attr("y", function(d) { return d.y; });
  
    });
  
      // action to take on mouse double click
  
  function dblclick(d) {  //color, stroke not working.
          //var pinned  = d3.select(this).attr("stroke");
          console.log("dblclick")
          if (d.fixed == true) { //pinned state
          console.log("pinned")
          d3.select(this)
          .attr("stroke", "#ffffff")
          .attr("stroke-width", 1.5)
          .classed("fixed", d.fixed = false);//now unpin
          } else { //else not pinned state
          console.log("not pinned")
          d3.select(this)
          .attr("stroke", "#000000")
          .attr("stroke-width", 4)
          .classed("fixed", d.fixed = true);
          }
  
  
          }//end dbl click
  
  });
  
  &lt;/script&gt;`
  </code></pre>
  
  <p>Here is the output of the console log (where I added console.log(this) to check the right element is being passed to the dblclick function and if parameters are being set accordingly:</p>
  
  <pre><code>[Log] dblclick (miserables_graph.html, line 131)
  [Log] &lt;circle class=​"node fixed" r=​"9.1104335791443" stroke=​"#000000" style=​"fill:​ #f6e8c3;​" cx=​"630.38114584665" cy=​"98.39845698676822" stroke-width=​"4"&gt;​&lt;/circle&gt;​ (miserables_graph.html, line 132)
  
  [Log] not pinned (miserables_graph.html, line 140)
  [Log] dblclick (miserables_graph.html, line 131)
  [Log] &lt;circle class=​"node" r=​"9.1104335791443" stroke=​"#ffffff" style=​"fill:​ #f6e8c3;​" cx=​"630.38114584665" cy=​"98.39845698676822" stroke-width=​"1.5"&gt;​&lt;/circle&gt;​ (miserables_graph.html, line 132)
  
  [Log] pinned (miserables_graph.html, line 134)
  </code></pre>