Javascript 将d3图形附加到自动生成的表中？

好了，所有d3天才们，我急需帮助

这是在这个网页上发生的事情：我从服务器下载了一个JSON，在这个JSON中，有50个不同的数字数组，还有关于第90百分位、平均值、无聊的东西等的信息。我用无聊的信息动态地制作了一个表格，然后用“火花”值制作了一个图表。其原理是，表格中的数据显示出来，然后当你点击它时，它会展开以显示火花图

到目前为止，我已经有了表格，我有了sparks图，当我点击一行时，表格能够展开。现在我唯一要做的就是使图表位于表行的后面

以下是JSON的外观：

[
    {
        "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
    }
]

以下是html文档中的D3和AJAX/Jquery内容：

    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();
            });
        });

var信息=$.ajax({
键入：“获取”，
url:“myJSONurl”，
数据类型：“json”，
成功：功能（信息）{
信息.排序（函数（a，b）{
a=a.timerName.toLowerCase（）；
b=b.timerName.toLowerCase（）；
返回ab-1:0；
});
/**************************************************************************
这将创建图形。
***************************************************************************/
d3.json（'myJSONurl'，函数（info）{
对于（变量a=0；a

我怎么才能把d3图放在那个小地方

这里是我需要信息的地方：

var$ta=$（“”）。append（$（“”））。appendTo（“#reportTable”）；

---

提前非常感谢您！！！！！

我通过添加

var$ta=$（“”）。append（）.appendTo（“#reportTable”）；

行的id将使其位于正确的位置。制作图形时，我添加了一行，上面写着

“#graphTable”+a

，以将图形附加到具有匹配id的行中。我将把代码片段放在下面：

var-graph=d3.选择（“#graphTable”+a）.追加（“svg:svg”）
.attr（“宽度”，w+边距。左侧+边距。右侧）
.attr（“高度”，h+margin.top+margin.bottom）
.append（“svg:g”）
.attr（“转换”、“转换”（“+margin.bottom+”，“+margin.top+”）；

---

非常简单，但它起作用了。

所以

$ta

有一个DOM元素，你想在其中绘制图形（假设你把它变成一个div而不是img），对吗？然后

$ta.get（0）

是实际的DOM元素（即没有包装在jQuery选择中），你可以用

d3.select（$ta.get（0））将其转换成d3选择

。一旦你选择了d3，你就可以在其中绘制图形，就像你可以在

d3中绘制图形一样。选择（“图表”）

。这回答了问题吗？@meetamit。我对你的意思有点困惑。我尝试了一些其他方法，我可以（从JSON中的所有火花）得到所有图形通过说出

var-graph=d3进入第一行。选择（“#graphTable”）.append（“svg:svg”）

，然后在制作表格时进一步向下，

$ta=$（“”）。appe