我有一个D3.JS和Jquery代码，可以将json文件呈现为图形。每个图是用户的一组Twitter个人资料图片。 json文件是动态生成的，并从特定URL中检索。
这是Josn文件的一个例子：
{
name:"Graph",
children:[
{
name:"نفخر_برايتنا_الخضراء",
children:[
{
real_name:"Ahmed Al Omran",
screen_name:"ahmed",
profile_pic:"http://pbs.twimg.com/profile_images/495355319090810880/giEtljue_normal.jpeg"
},
{
real_name:"ماجد التويجري",
screen_name:"Tuwaijrim",
profile_pic:"http://pbs.twimg.com/profile_images/507953977430790145/BoF8TmIl_normal.jpeg"
},
{
real_name:"د.حافظ المدلج",
screen_name:"Hafez_AlMedlej",
profile_pic:"http://pbs.twimg.com/profile_images/457496447756546049/x-S0HHdM_normal.jpeg"
}
]
},
{
name:"شيل_الألف",
children:[
{
real_name:"سمير الجنيد",
screen_name:"SamirJunaid",
profile_pic:"http://pbs.twimg.com/profile_images/505355564977618944/7sLBmz1a_normal.jpeg"
},
{
real_name:"تويتر محمد المطيري ",
screen_name:"m_almutairi",
profile_pic:"http://pbs.twimg.com/profile_images/491273183597580289/ynZAwSnx_normal.jpeg"
},
{
real_name:"محماس الرابع طـعش™",
screen_name:"m7__14",
profile_pic:"http://pbs.twimg.com/profile_images/494505359487156224/pJkSlhUy_normal.jpeg"
},
{
real_name:"عبدالمجيد الكناني",
screen_name:"Abdulmajeed113",
profile_pic:"http://pbs.twimg.com/profile_images/432559990323552256/GIlFpQ4y_normal.jpeg"
},
{
real_name:"اِستثنائي",
screen_name:"1171420",
profile_pic:"http://pbs.twimg.com/profile_images/512147080538619904/l2Xde2Kp_normal.jpeg"
}
]
},
{
name:"عبدالله_القاضي_مفقود_في_لوس_انجلوس",
children:[
{
real_name:"فراس بقنه",
screen_name:"FMB4",
profile_pic:"http://pbs.twimg.com/profile_images/467237157568913408/beqbB3VC_normal.jpeg"
},
{
real_name:"د خالد المنيف",
screen_name:"khalids225",
profile_pic:"http://pbs.twimg.com/profile_images/507317153746280448/aCjeeuHi_normal.jpeg"
},
{
real_name:"فهد بن عبدالله البكر",
screen_name:"Falbaker",
profile_pic:"http://pbs.twimg.com/profile_images/478487523178450946/Wf1cbofN_normal.jpeg"
},
{
real_name:"د . سامي الحمود",
screen_name:"Sami_Alhomood",
profile_pic:"http://pbs.twimg.com/profile_images/451473568795074560/EMD5DwB-_normal.jpeg"
}
]
}
]
}
javascript代码如下：
var url = "http://URL to JSON";
$(document).ready(function() {
drawGraph();
});
function drawGraph(){
var w = 900,
h = 900,
r = 900,
x = d3.scale.linear().range([0, r]),
y = d3.scale.linear().range([0, r]),
node,
root;
var pack = d3.layout.pack()
.size([r, r])
.value(function(d) { return 1; });
var vis = d3.select("#content1").insert("svg:svg")
.attr("xmlns", "http://www.w3.org/2000/svg")
.attr("width", w)
.attr("height", h);
var defs = vis.append("svg:defs");
var g = vis.append("svg:g")
.attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");
d3.json(url, function(data) {
node = root = data;
var nodes = pack.nodes(root);
defs.selectAll("pattern")
.data(nodes)
.enter().append("svg:pattern")
.attr("id", function(d, i) { return "i" + i; })
.attr("x", "0")
.attr("y", "0")
.attr("patternunits", "userSpaceOnUse")
.attr("width", function(d) { return d.r * 1; })
.attr("height", function(d) { return d.r * 1; })
.append("svg:image")
.attr("xlink:href", function(d, i) { return d.profile_pic; })
.attr("x", "0")
.attr("y", "0")
.attr("width", function(d) { return d.r * 2; })
.attr("height", function(d) { return d.r * 2; });
g.selectAll("circle")
.data(nodes)
.enter()
.append("a")
.attr("xlink:href", function(d) {return !d.name ? "https://twitter.com/search/%23" + d.parent.name + "%20from%3A" + d.screen_name : "#"; })
.attr("target", function(d) { return !d.children ? "_blank" : "_self"; })
.append("svg:circle")
.attr("fill", function(d, i) { return "url(#i" + i + ")"; });
g.selectAll("circle")
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; });
g.selectAll("rect")
.data(nodes)
.enter()
.append("svg:rect")
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("x", function(d) { return (d.x - d.r) + (d.r * 2 * 0.025); })
.attr("y", function(d) { return d.y - (d.r * 0.40) / 2; })
.attr("rx", "5")
.attr("ry", "5")
.attr("width", function(d) { return (d.r * 2) * 0.95; })
.attr("height", function(d) { return d.r * 0.40; });
g.selectAll("text")
.data(nodes)
.enter().append("svg:text")
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("font-size", function(d) {
if ((d.r * 2) < 40) {
return "0.35em";
} else if ((d.r * 2) >= 40 && (d.r * 2) < 80) {
return "0.55em";
} else if ((d.r * 2) >= 80 && (d.r * 2) < 120) {
return "0.65em";
} else if ((d.r * 2) >= 120 && (d.r * 2) < 160) {
return "0.75em";
} else if ((d.r * 2) >= 160 && (d.r * 2) < 200) {
return "1.25em";
} else if ((d.r * 2) >= 200 && (d.r * 2) < 240) {
return "1.5em";
} else if ((d.r * 2) >= 280 && (d.r * 2) < 280) {
return "1.70em";
} else {
return "2.0em";
}
})
.style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
.text(function(d) { return d.name ? d.name : d.real_name; });
g.select("circle").remove(0);
g.select("text").remove(0);
g.select("rect").remove(0);
$("#progress").hide();
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
我在Javascript和Jquery方面的经验不强。我在网上搜索了很多，并提出了一些我无法实现的解决方案，因为我缺乏经验：解决方案是：
我试图这样做，但我失败了，我希望有人指出我正确的方向。此代码也可以以不同的方式进行优化。我希望我包含所有必要的信息和文件。如果您需要更多信息，请与我们联系。