将d3图形附加到自动生成的表格吗？

Question

Alright all you d3 geniuses out there, I am in desperate need of help!!

So here's what happens on this webpage: I download a JSON from the server, and in that JSON, there are like 50 different arrays of numbers, alongside information about 90th percentiles, averages, boring stuff, etc. I dynamically make a table out of the boring information, and then I make a graph out of the 'sparks' values. The theory is that the the table shows up, and then when you click on it, it expands to show the sparks graph.

So far, I have the table, I have the sparks graphs, and I have the table able to expand when I click on a row. Now the only thing I have left to do is make it so that the graph is behind the table row.

Here is what the JSON looks like:

[
    {
        "sparks": [
            3107.9, 
            2856.0, 
            2778.8, 
            2987.5, 
            3364.2, 
            3112.6, 
            2934.7, 
            2798.6, 
            2933.0, 
            2813.8, 
            2916.8, 
            2948.1, 
            2859.0, 
            1159.8
        ], 
        "daily_percentile_90th": 3024.2, 
        "min_percentile_90th": 1159.8, 
        "max_percentile_90th": 4934.2, 
        "daily_percentile_50th": 2556.0, 
        "timerName": "Search:Books:SearchResults", 
        "daily_average": 2636.9
    }, 
    {
        "sparks": [
            4024.0, 
            3233.0, 
            3845.4, 
            3300.6, 
            4364.1, 
            4141.1, 
            4017.3, 
            4228.0, 
            4261.4, 
            5518.9, 
            5118.8, 
            4321.7, 
            4239.0, 
            1598.8
        ], 
        "daily_percentile_90th": 4242.0, 
        "min_percentile_90th": 1598.8, 
        "max_percentile_90th": 8334.5, 
        "daily_percentile_50th": 3775.0, 
        "timerName": "Temple:Shared", 
        "daily_average": 3685.19
    }, 
    {
        "sparks": [
            2295.0, 
            1741.0, 
            1492.0, 
            2202.6, 
            1786.2, 
            2239.4, 
            1543.9, 
            1723.2, 
            1769.2, 
            2247.9, 
            1984.6, 
            1597.3, 
            2301.0, 
            634.4
        ],
        "daily_percentile_90th": 1592.0, 
        "min_percentile_90th": 634.4,
        "max_percentile_90th": 7887.8, 
        "daily_percentile_50th": 3660.0, 
        "timerName": "Search:Geneologies:NameSearchResults", 
        "daily_average": 3838.27
    }
]

Here is the D3 and AJAX/Jquery stuff in the html document:

    var information = $.ajax({
    type: "GET",
    url: "myJSONurl",
    dataType: "json",
    success: function (information) {
        information.sort( function( a, b ) {
            a = a.timerName.toLowerCase();
            b = b.timerName.toLowerCase();

            return a < b ? -1 : a > b ? 1 : 0;
        });

/**************************************************************************
                        This creates the graphs.
***************************************************************************/
d3.json('myJSONurl', function(info){
            for(var a=0; a < info.length; a++){
            var data = info[a];

        var m = [80, 80, 80, 80]; // margins
        var w = 500 - m[1] - m[3]; // width
        var h = 300 - m[0] - m[2]; // height

        var x = d3.scale.linear().domain([0, data.sparks.length]).range([0, w]);
        var y = d3.scale.linear().domain([0, 8000]).range([h, 0]);

        var line = d3.svg.line()
            .x(function(d,i) { 
                return x(i); 
            })
            .y(function(d) { 
                return y(d); 
            })

            var graph = d3.select("#chart").append("svg:svg")
                .attr("width", w + m[1] + m[3])
                .attr("height", h + m[0] + m[2])
                .append("svg:g")
                .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

            var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
            graph.append("svg:g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + h + ")")
                .call(xAxis);

            var yAxisLeft = d3.svg.axis().scale(y).ticks(6).orient("left");
            graph.append("svg:g")
                .attr("class", "y axis")
                .attr("transform", "translate(-25,0)")
                .call(yAxisLeft);

            graph.append("svg:path").attr("d", line(data.sparks));    
    }
});

/**************************************************************************
                    This populates the table.
***************************************************************************/
        $.each(information, function(i, item) {

            var $tr = $("<tr class='clickable'>").append(
                $("<td align='left'>").text(item.timerName),
                $("<td>").text(item.daily_percentile_90th),
                $("<td>").text(item.daily_percentile_50th),  
                $("<td>").text(item.min_percentile_90th),
                $("<td>").text(item.max_percentile_90th),
                $("<td>").text(item.daily_average)).appendTo("#reportTable");
            var $ta = $("<tr>").append($('<img src = "RIGHTNOWITONLYTAKESIMAGES.JPG">')).appendTo("#reportTable");
        });
/*RIGHT ABOVE THIS LINE IS WHERE I NEED HELP!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/******************************************
This allows the rows to expand when clicked
******************************************/
        $(document).ready(function() {
            $("body").on ("click", ".clickable", function () {
                $(this).nextAll("tr").each( function() {
                    if($(this).is(".clickable")) {
                        return false;
                    }
                    $(this).toggle();
                });
            });

            $(".clickable").nextAll("tr").each( function() {
                if(!($(this).is(".clickable")))
                    $(this).hide();
            });
        });

How do I get the d3 graph in side that little spot??

Here's where I need the info: var $ta = $("<tr>").append($('<img src = "RIGHTNOWITONLYTAKESANIMAGE.JPG">')).appendTo("#reportTable");

THANK YOU SO MUCH IN ADVANCE!!!!!!

Answer 1

I figured it out by adding

var $ta = $("<tr id='graphTable"+(i)+"'>").append().appendTo("#reportTable");

The id of the row is what will put it in the correct place. When making the graph, I added a line that says "#graphTable" + a to append the graph to the row with the id that matches. I'll put the code snippet below:

var graph = d3.select("#graphTable"+a).append("svg:svg") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom) .append("svg:g") .attr("transform", "translate(" + margin.bottom + "," + margin.top + ")");

Pretty simple, but it worked. :)