Question

好吧你们所有的d3天才，我迫切需要帮助!!

所以这就是这个网页上发生的事情：我从服务器上下载了一个JSON，在那个JSON中，有50个不同的数字数组，以及有关第90个百分位数，平均数，无聊内容等的信息。我用无聊的信息动态制作一张桌子，然后用“火花”制作图表。值。理论是表格显示，然后当你点击它时，它会展开以显示火花图形。

到目前为止，我有表格，我有火花图表，当我点击一行时，我可以扩展表格。现在，我唯一要做的就是使图表位于表格行的后面。

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

如何将d3图放在那个小点？

在这里我需要信息：var $ta = $("<tr>").append($('<img src = "RIGHTNOWITONLYTAKESANIMAGE.JPG">')).appendTo("#reportTable");

非常感谢你!!!!!!

Answer 1

我通过添加

来解决这个问题

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

行的id是将它放在正确的位置。制作图表时，我添加了一行代表"#graphTable" + a的图表，将图表附加到ID匹配的行中。我将把代码片段放在下面：

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 + ")");

非常简单，但有效。：）

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

1 个答案: