score:2

Accepted answer

For this purpose I suggest you ditch jQuery in favor of D3. The following two lines in your click listener will do the job:

d3.select(".selectedCounty").attr("class", "counties");
d3.select(this).attr("class", "selectedCounty");

The first statement selects the element having class .selectedCounty and sets the class attribute to counties instead. The second one selects the element clicked upon and set its class to selectedCounty.

It might also be worth considering to keep a reference to the currently selected element in a variable in the outer scope to not having to reselect on every click:

var selectedCounty = d3.select(".selectedCounty");

edit.map.append("g")
// ...
  .on("click", function(d) {
    selectedCounty.attr("class", "counties");
    selectedCounty = d3.select(this).attr("class", "selectedCounty");
  }

As requested by Teton-Coder's comment there might be the need to toggle the class instead of just replacing it. Using selection.attr("class", "selectedCounty") will set the value of the class attribute, whereby replacing any other classes set on the element. Although you are allowed to pass a space-separated list to the attribute via this function the easiest way to toggle a specific class on an element is the use of selection.classed(). The second argument to that function is a boolean value determining if the class should either be assigned to the element or be removed from it while leaving all other classes intact. The above code can thus be rewritten as:

var selectedCounty = d3.select(".selectedCounty");

edit.map.append("g")
// ...
  .on("click", function(d) {
    selectedCounty.classed("selectedCounty", false);
    selectedCounty = d3.select(this).classed("selectedCounty", true);
  }

Related Query

More Query from same tag