Link to Rails partial in D3.js circles?

Question

In my Rails app I have D3.js circles that are created dynamically from data in my Rails app. I'd like to hyperlink the circles so when you click on one, it loads a partial associated to the model that the circle is visualizing.

Here's my D3 code:

d3JSON = function(){
        d3.json("/folders/<%= @folder.id %>.json", function(error, data) {
            if (error) return console.warn(error);

            var folderChildren = [],
            circle;

            var svg = d3.select("body").selectAll("svg");

            circle = svg.selectAll("circle")
            .data(data.submissions, String);

            circle.enter().append("svg:a")
            .attr("xlink:href", function(d){
                return "http://localhost:3000/submissions/" + d.id;
            })
            .append("circle")
            .attr("cy", function(d) {return d.content.length * 5 + "px";})
            .attr("class", "floating")
            .attr("cx", function(d){
                return (d.content.length / 2) * 10 + "px";
            })
            .attr("r", function(d){ return (d.content.length / 2) * 1.2;});

            circle.exit().remove();

        });
    };

Everything works great except for when the the circle enter's and has an a attribute appended. As you can see, right now I have the circle just linking directly to the submission model associated to it. I've tried using this:

circle.enter().append("svg:a")
            .attr("xlink:href", function(d){
                return "<%= link_to submission_path(" + d + "), remote: true %>";
            })

But that fails to work. Also replacing "d" with "d.id" doesn't work. Any ideas? I'm new to D3.

Answer 1

What you are trying to do is writing Ruby in JavaScript strings, which obviously wouldn't work.

You can simply put these links in the json.