1

I have an SVG map of the U.S., and I would like to make it so that when you click on a state, a new page loads with information about that state.

Here is my code that fills the states (the paths are already created); it's a choropleth so the color is based on murder rates.

d3.selectAll("path") .attr("fill", function(d) { return color(murderrates[codes.indexOf(this.id)]) }) .on("click", **load(new page, this.id)**)

The pseudo code between the asterisks is what I'd like to accomplish: when the state is clicked, open a new page and tell it which state was clicked so it knows what information to display. In other words, the new page should be able to "accept an argument" - the state - so it knows what to display.

Edit: I do not have a different page to load for each state. Instead, it is one page that could display 50 different things depending on which state caused it to load. So let's say I had a variable called origin in my new page. I would like the value of origin to be set to this.id upon loading.

pwerth
  • 190
  • 1
  • 2
  • 13

1 Answers1

2

Building off of @StephenThomas's comment, you can define a function loadPage that uses this.id to change the window.location:

function loadPage(){
    window.location = URL + "?origin=" + this.id;
}

This will open a new page where the query parameter "origin" will contain this.id. You can then parse the query param, e.g. like this.

Then pass that function as the callback to the onclick, as D3 will automatically set the value of this to the appropriate element:

.on("click", loadPage)
Community
  • 1
  • 1
mdml
  • 19,981
  • 8
  • 48
  • 61
  • @pwerth: do you mean something like `return URL + "&origin=" + this.id`? This will store `this.id` in a query param in the new page, which you can retrieve using Javascript, e.g. [like this](http://stackoverflow.com/questions/2090551/parse-query-string-in-javascript). – mdml Jul 09 '14 at 17:06
  • yes, something like that would work. however, when I try `return window.location = URL + "&origin=" + this.id` it says webpage not found. I think it's looking for a file that has that url and none exists – pwerth Jul 09 '14 at 17:16
  • @pwerth: what URL are you using? (Also, you don't need to `return`, I removed that from my answer.) – mdml Jul 09 '14 at 17:17
  • @pwerth: Argh, sorry about that, that would do it :) – mdml Jul 09 '14 at 17:19
  • no worries. thanks for the help, i'd upvote your answer but i don't have enough rep – pwerth Jul 09 '14 at 17:31