d3.js: How to change a nodes' representation i

Question

I am trying to expand this force layout example by changing a nodes' shape from circle to rectangle when it is clicked. So I don't want to change any data but just want to replace the corresponding SVG element.

One of my approaches looked like this:

     node.on("click", function() {
        this.remove();
        svg.selectAll(".node").data(graph.nodes).enter().append("rect")
                .attr("class", "node")
                .attr("width", 5).attr("height", 5)
                .style("fill", function(d) { return color(d.group); });
    });

So I removed the SVG element from the DOM and rebound the data, adding a rectangle for the now missing node.

Unfortunately this does not work (the force layout does not set any properties on the new element) and I have no idea if this a reasonable approach at all.

Any ideas how to do this properly?

Answer 1

Try this way.

node.on("click", function(d) {
  var size = d.weight * 2 + 12;
  d3.select(this).select("circle").remove();
  d3.select(this).append("rect")
    .attr("x", -(size / 2))
    .attr("y", -(size / 2))
    .attr("height", size)
    .attr("width", size)
    .style("fill", function(d) {
      return color(1 / d.rating);
    });
});

Working code snippet -

var graph = {
  "nodes": [{
    "name": "1",
    "rating": 90,
    "id": 2951
  }, {
    "name": "2",
    "rating": 80,
    "id": 654654
  }, {
    "name": "3",
    "rating": 80,
    "id": 6546544
  }, {
    "name": "4",
    "rating": 1,
    "id": 68987978
  }, {
    "name": "5",
    "rating": 1,
    "id": 9878933
  }, {
    "name": "6",
    "rating": 1,
    "id": 6161
  }, {
    "name": "7",
    "rating": 1,
    "id": 64654
  }, {
    "name": "8",
    "rating": 20,
    "id": 354654
  }, {
    "name": "9",
    "rating": 50,
    "id": 8494
  }, {
    "name": "10",
    "rating": 1,
    "id": 6846874
  }, {
    "name": "11",
    "rating": 1,
    "id": 5487
  }, {
    "name": "12",
    "rating": 80,
    "id": "parfum_kenzo"
  }, {
    "name": "13",
    "rating": 1,
    "id": 65465465
  }, {
    "name": "14",
    "rating": 90,
    "id": "jungle_de_kenzo"
  }, {
    "name": "15",
    "rating": 20,
    "id": 313514
  }, {
    "name": "16",
    "rating": 40,
    "id": 36543614
  }, {
    "name": "17",
    "rating": 100,
    "id": "Yann_YA645"
  }, {
    "name": "18",
    "rating": 1,
    "id": 97413
  }, {
    "name": "19",
    "rating": 1,
    "id": 97414
  }, {
    "name": "20",
    "rating": 100,
    "id": 976431231
  }, {
    "name": "21",
    "rating": 1,
    "id": 9416
  }, {
    "name": "22",
    "rating": 1,
    "id": 998949
  }, {
    "name": "23",
    "rating": 100,
    "id": 984941
  }, {
    "name": "24",
    "rating": 100,
    "id": "99843"
  }, {
    "name": "25",
    "rating": 1,
    "id": 94915
  }, {
    "name": "26",
    "rating": 1,
    "id": 913134
  }, {
    "name": "27",
    "rating": 1,
    "id": 9134371
  }],
  "links": [{
    "source": 6,
    "target": 5,
    "value": 6,
    "label": "publishedOn"
  }, {
    "source": 8,
    "target": 5,
    "value": 6,
    "label": "publishedOn"
  }, {
    "source": 7,
    "target": 1,
    "value": 4,
    "label": "containsKeyword"
  }, {
    "source": 8,
    "target": 10,
    "value": 3,
    "label": "containsKeyword"
  }, {
    "source": 7,
    "target": 14,
    "value": 4,
    "label": "publishedBy"
  }, {
    "source": 8,
    "target": 15,
    "value": 6,
    "label": "publishedBy"
  }, {
    "source": 9,
    "target": 1,
    "value": 6,
    "label": "depicts"
  }, {
    "source": 10,
    "target": 1,
    "value": 6,
    "label": "depicts"
  }, {
    "source": 16,
    "target": 1,
    "value": 6,
    "label": "manageWebsite"
  }, {
    "source": 16,
    "target": 2,
    "value": 5,
    "label": "manageWebsite"
  }, {
    "source": 16,
    "target": 3,
    "value": 6,
    "label": "manageWebsite"
  }, {
    "source": 16,
    "target": 4,
    "value": 6,
    "label": "manageWebsite"
  }, {
    "source": 19,
    "target": 18,
    "value": 2,
    "label": "postedOn"
  }, {
    "source": 18,
    "target": 1,
    "value": 6,
    "label": "childOf"
  }, {
    "source": 17,
    "target": 19,
    "value": 8,
    "label": "describes"
  }, {
    "source": 18,
    "target": 11,
    "value": 6,
    "label": "containsKeyword"
  }, {
    "source": 17,
    "target": 13,
    "value": 3,
    "label": "containsKeyword"
  }, {
    "source": 20,
    "target": 13,
    "value": 3,
    "label": "containsKeyword"
  }, {
    "source": 20,
    "target": 21,
    "value": 3,
    "label": "postedOn"
  }, {
    "source": 22,
    "target": 20,
    "value": 3,
    "label": "postedOn"
  }, {
    "source": 23,
    "target": 21,
    "value": 3,
    "label": "manageWebsite"
  }, {
    "source": 23,
    "target": 24,
    "value": 3,
    "label": "manageWebsite"
  }, {
    "source": 23,
    "target": 25,
    "value": 3,
    "label": "manageWebsite"
  }, {
    "source": 23,
    "target": 26,
    "value": 3,
    "label": "manageWebsite"
  }]
}


var margin = {
  top: -5,
  right: -5,
  bottom: -5,
  left: -5
};
var width = 500 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

var color = d3.scale.category20();

var force = d3.layout.force()
  .charge(-200)
  .linkDistance(50)
  .size([width + margin.left + margin.right, height + margin.top + margin.bottom]);

var zoom = d3.behavior.zoom()
  .scaleExtent([1, 10])
  .on("zoom", zoomed);

var drag = d3.behavior.drag()
  .origin(function(d) {
    return d;
  })
  .on("dragstart", dragstarted)
  .on("drag", dragged)
  .on("dragend", dragended);


var svg = d3.select("#map").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
  .call(zoom);

var rect = svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .style("fill", "none")
  .style("pointer-events", "all");

var container = svg.append("g");

//d3.json('http://blt909.free.fr/wd/map2.json', function(error, graph) {

force
  .nodes(graph.nodes)
  .links(graph.links)
  .start();



var link = container.append("g")
  .attr("class", "links")
  .selectAll(".link")
  .data(graph.links)
  .enter().append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) {
    return Math.sqrt(d.value);
  });

var node = container.append("g")
  .attr("class", "nodes")
  .selectAll(".node")
  .data(graph.nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .call(drag);

node.append("circle")
  .attr("r", function(d) {
    return d.weight * 2 + 12;
  })
  .style("fill", function(d) {
    return color(1 / d.rating);
  });


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("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });
});

var linkedByIndex = {};
graph.links.forEach(function(d) {
  linkedByIndex[d.source.index + "," + d.target.index] = 1;
});

function isConnected(a, b) {
  return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index];
}

node.on("click", function(d) {
  var size = d.weight * 2 + 12;
  d3.select(this).select("circle").remove();
  d3.select(this).append("rect")
    .attr("x", -(size / 2))
    .attr("y", -(size / 2))
    .attr("height", size)
    .attr("width", size)
    .style("fill", function(d) {
      return color(1 / d.rating);
    });
});

function dottype(d) {
  d.x = +d.x;
  d.y = +d.y;
  return d;
}

function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();

  d3.select(this).classed("dragging", true);
  force.start();
}

function dragged(d) {

  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);

}

function dragended(d) {

  d3.select(this).classed("dragging", false);
}

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}
.node-active {
  stroke: #555;
  stroke-width: 1.5px;
}
.link {
  stroke: #555;
  stroke-opacity: .3;
}
.link-active {
  stroke-opacity: 1;
}
.overlay {
  fill: none;
  pointer-events: all;
}
#map {
  border: 2px #555 dashed;
  width: 500px;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
  <div id="map"></div>
</body>

Answer 2

You've updated the dom elements, but not the array used by the force layout algorithm, so do this as the last line in the on click function:

graph.nodes = svg.selectAll(".node");

(You might also find without a data key function that random nodes get changed to rectangles rather than the one you clicked)