I am trying to update a map (d3) in order to add or remove markers.
In principle it works, I have a .js Script with the following code snippet:

HTML Code:
function loadMap(filterdata)
    var width = 500,
    height = 1000;
    var projection = d3.geo.mercator()
	.center([-110, 45])

    var svg = d3.select("#map").append("svg")
	.attr("width", width)
	.attr("height", height);
    var path = d3.geo.path()
    var currentholder;
    var currentsite;
    var filterdataSite=[];
    var filterdataHolder=[];
    var g = svg.append("g");
    d3.json("json", function(error, data) {
	d3.json("json", function(error, topology) {
		.data(topojson.object(topology, topology.objects.countries)
		.attr("d", path)
 		.attr("cx", function(d) {
			return projection([filterdata[d.ID].siteslong, filterdata[d.ID].siteslat])[0];
		.attr("cy", function(d) {
			return projection([filterdata[d.ID].siteslong, filterdata[d.ID].siteslat])[1];
		.attr("r", 3)
		.style("fill", "red")
and an html code where can I call the map via
HTML Code:
  $(document).ready(function() {
                               name: 'layout-right',
                               panels: [
                                       { type: 'top',  size: 500, resizable: true, style: pstyle, content: 'metadata' },
                                       { type: 'main', size: 400, style: pstyle, content: '<div id="map" style="height: 100%"></div>'  }
that means, I use the id=map for calling.
The problem: I can only do it once!
First of all I thought it is due to the .append but then I would expect that more and more markers would appear.
But this is not the case. It seems so to be that nothing happens....(due to the $(document).ready(function() ?).

Do I have to refresh/remove the div element "map"(?). If yes, how?

Many thanks!