jQuery addClass example

Change class name on click in jQuery

by vrluckyin India

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

CSS

<style>

.background {
  fill: none;
  pointer-events: all;
}

#states {
  fill: #aaa;
}

#states .active {
  fill: orange;
}

#state-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

JavaScript

var width = 960,
    height = 500,
    centered;

var projection = d3.geo.albersUsa()
    .scale(1070)
    .translate([width / 2, height / 2]);


var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", clicked);

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

var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "Section 1"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[239,0],[559,0],[559,80],[239,80],[239,0]]]
      }
    },
	{
      "type": "Feature",
      "properties": {
        "name": "Section 2"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[239,240],[559,240],[559,320],[239,320],[239,240]]]
      }
    },
	{
      "type": "Feature",
      "properties": {
        "name": "Section 3"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[659,280],[779,280],[779,600],[659,600],[659,280]]]
      }
    },
	{
      "type": "Feature",
      "properties": {
        "name": "Section 4"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[49,290],[169,290],[169,610],[49,610],[49,290]]]
      }
    },
	{
      "type": "Feature",
      "properties": {
        "name": "Section 5"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[169,480],[399,480],[399,560],[169,560],[169,480]]]
      }
    },
	{
      "type": "Feature",
      "properties": {
        "name": "Section 6"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[424,480],[654,480],[654,560],[424,560],[424,480]]]
      }
    },
	{
      "type": "Feature",
      "properties": {
        "name": "Section 7"
      },
      "geometry": {
        "type":...