Attaching links to Rects

[Stark]

Hello d3 Users!

I am trying have rects act as hyperlinks. I am incorporating a
soundcloud player into my site. To add a song to a soundcloud player,
you simply provide it a link, with the class being "sc-player". I
added a link to every rect and added the class inside my JS file. The
code is below for the hyperlink.

cell.append("a")
.attr("class", "sc-player")
.attr("xlink:href", "http://soundcloud.com/diplo/climax-diplo-and-
flosstradamus")
.append("rect")

The problem is, when I click the link, it opens up in a new window. If
I add the class to a hyperlink inside the main html document, it
functions properly. When I check the html, the class attribute is
properly appended, so the JS is adding it to the link. Any ideas why
this would happen? I can post full code if necessary.

Thanks in advance!

[Frank Guerino]

Hi Stark,

I'm a little confused about your issue.  It sounds like you don't want the link to open a new page.  If this is the case, I suggest using the "on click" event to trigger a callback function that will do whatever it is that you want to do with the link.

My Best,

Frank

[Stark]

Hey Frank,

Thanks for the response. Let me try to clarify. If I have regular
html, as below, the link doesn't open up in a new page, its added to a
soundcloud custom player. (essentially adding a song to a playlist).
This is accomplished by having its class be "sc-player")

<li>
<a href="http://soundcloud.com/diplo/climax-diplo" class="sc-
player">Friends</a>
</li>
So if this is inside my index.php file, this song linked to from
soundcloud will start playing in my player on my webpage because the
class is "sc-player".

Now, if I try to have this functionality inside my d3 js file, by
attaching links to the rects, the links just open in a new browser, as
opposed to opening in the music player, as the class="sc-player" tells
it to do.

cell.append("a")
.attr("class", "sc-player")
.attr("xlink:href", "http://soundcloud.com/diplo/climax-diplo-and-
flosstradamus")
.append("rect")

If I were to add onclick, would it be to the rect, or the link? How do
I follow a link inside in java script without opening a new window.

Thanks!
Sorry for the confusion.

[Frank Guerino]

Hi Stark, 

Something tells me that, after appending a link to an element, the ".attr("xlink:href","link_path") attribute is programmed to automatically open up a new page, on click.

In the example "Multiple D3 Horizontal Bar Charts Mixed In With Common HTML Layout Constructs" I assign links to the rectangles, which has a default behavior of opening a new web page, on click.  You'll find, in the example, that I assigned "on" "mouseover" callback functions to the rectangles that allow me to do things like change their color when mousing over them.  It's a guess but I'd recommend that you try adding an "on" "click" callback that can explicitly pass the link value to and call your player, directly.

I hope this helps,

Frank