【发布时间】：2015-05-28 18:15:12
【问题描述】：
好吧，你们这些 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");
非常感谢您！！！！！！
【问题讨论】：
-
所以
$ta拥有您想要在其中绘制图形的 DOM 元素（假设您将其设为 div 而不是 img），对吗？然后$ta.get(0)是实际的 DOM 元素（即不包含在 jQuery 选择中），您可以使用d3.select($ta.get(0))将其转换为 d3 选择。选择 d3 后，您可以将图形绘制到其中，就像您可以将图形绘制到d3.select("#chart")中一样。这能回答问题吗？ -
@meetamit 之类的。我对你的意思有点困惑。我尝试了其他一些方法，我可以通过说
var graph = d3.select("#graphTable").append("svg:svg")将所有图表（来自 JSON 中的所有火花）放入第一行，然后在我制作表格时进一步向下，$ta = $("<tr id='graphTable'>").append().appendTo("#reportTable");但我该怎么做将每个图拆分为它所属的行？ -
其实我明白了。谢谢:)
标签： javascript jquery html json d3.js