Question

我有一个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方面的经验不强。我在网上搜索了很多，并提出了一些我无法实现的解决方案，因为我缺乏经验：解决方案是：

使用Canvas代替SVG。
分别渲染每个圆圈并在它们之间设置延迟。

我试图这样做，但我失败了，我希望有人指出我正确的方向。此代码也可以以不同的方式进行优化。我希望我包含所有必要的信息和文件。如果您需要更多信息，请与我们联系。

JQuery和D3.js使大多数移动浏览器崩溃

0 个答案: