Question

我对js和d3都很陌生，并且很难获得结果。我想创建一个像树一样的索引，并在该树的节点的角落动态创建一个基于json属性的矩形：

所以我希望在树节点上动态生成这些深蓝色矩形，具体取决于json文件中的attribute属性。如果任何节点没有attribute属性，则不应创建此矩形。矩形内部是属性属性的值。此矩形的大小也应该是动态的，就像我有多个逗号分隔的属性，然后矩形应动态更改其大小。但经过花了很多精力，我得到了这样的树：

所以我无法创建蓝色矩形，并且属性值被添加到每个节点（所有属性重叠），无论它是否具有属性。

以下是我的代码：

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node rect {
  cursor: pointer;
  fill: #fff;
  fill-opacity: .5;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
}

path.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var jsonData = [
	{
	"name":"Internet Access main",
	"attribute":{" Broadband provider ":"xyz","Broadband id ":" "},
	"type":null,
	"action":"Create Provide",
	"prnt":null,
	"children":[
		{
			"name":"Internet Access plan",
			"attribute":{},
			"type":null,
			"action":"Provide", 			
			"prnt":"Internet Access main",
			"children":[]
		},
		{
			"name":"Service Technology",
			"attribute":{"Service Technology ":" XDBL"},
			"type":null,
			"action":"Provide",
			"prnt":"Internet 	Access main",
			"children":[]
		},
		{
			"name":"Access",
			"attribute":{},
			"type":null,
			"action":"Provide",
			"prnt":"Internet Access main",
			"children":[]
		},
		{
			"name":"Upload speed Boost",
			"attribute":{},
			"type":null,
			"action":"Provide",
			"prnt":"Internet Access main",
			"children":[]
		},
		{
			"name":"Download Speed Boost",
			"attribute":{},
			"type":null,
			"action":"Provide",
			"prnt":"Internet Access main",
			"children":[]
		},
		{
			"name":"Internet Additional Service",
			"attribute":{},
			"type":null,
			"action":"Provide",
			"prnt":"Internet Access main",
			"children":[
				{
					"name":"My Business Online",
					"attribute":{},
					"type":null,
					"action":"Provide",
					"prnt":"Internet Additional Service",
					"children":[]
				},
				{
					"name":"Mcloude",
					"attribute":{},
					"type":null,
					"action":"Provide",
					"prnt":"Internet Additional Service",
					"children":[]
				},
				{
					"name":"AULA 385",
					"attribute":{},
					"type":null,
					"action":"Provide",
					"prnt":"Internet Additional Service",
					"children":[]
				},
				{
					"name":"Maintenance",
					"attribute":{},"type":null,
					"action":"Provide",
					"prnt":"Internet Additional Service",
					"children":[]
				},
				{
					"name":"MCAfee",
					"attribute":{},
					"type":null,
					"action":"Provide",
					"prnt":"Internet Additional Service",
					"children":[
						{
							"name":"Full Security",
							"attribute":{},
							"type":null,
							"action":"Provide",
							"prnt":"MCAfee",
							"children":[]
						},
						{
							"name":"Antivirus",
							"attribute":{},
							"type":null,
							"action":"Provide",
							"prnt":"MCAfee",
							"children":[]
						}
					]
				}
			]
		}
	]
}
	
]

var margin = {top: 30, right: 20, bottom: 30, left: 20},
    width = 960 - margin.left - margin.right,
    barHeight = 20,
	barWidth = 150;

var i = 0,
    duration = 400,
    root;

var tree1 = d3.layout.tree()
    .nodeSize([0, 20]);

<!-- var diagonal = d3.svg.diagonal() -->
    <!-- .projection(function(d) { return [d.y, d.x]; }); -->
	
var diagonal = function elbow(d, i) {	
  return "M" + d.source.y + "," + d.source.x
      + "V" + d.target.x + "H" + d.target.y;
}

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

root=jsonData[0];
update(root);
console.log(root);

function update(source) {

  // Compute the flattened node list. TODO use d3.layout.hierarchy.
  var nodes = tree1.nodes(root);
  
  console.log(nodes);
  console.log("amit:-- " + nodes.length);

  var height = Math.max(1000, nodes.length * barHeight + margin.top + margin.bottom);

  d3.select("svg")//.transition()
      //.duration(duration)
      .attr("height", height);

  // Compute the "layout".
  nodes.forEach(function(n, i) {
    //n.x = i * barHeight;
	n.x = i * 40;
  });

  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .style("opacity", 1e-6);

  // Enter any new nodes at the parent's previous position.
  nodeEnter.append("rect")
      .attr("y", -barHeight / 2)
      .attr("height", barHeight)
      .attr("width", barWidth)
	  .attr("rx", 5)
	  .attr("ry", 5)
      .style("fill", color);

  nodeEnter.append("text")
      .attr("dy", 3.5)
      .attr("dx", 5.5)
      .text(function(d) { console.log(d.attribute);return d.name; });
	  
  
	  
 nodes.forEach(function(n){
	if(JSON.stringify(n.attribute)!="{}"){		
		var str= JSON.stringify(n.attribute);
		var str1 = str.substr(1, str.length-2);		
		var attrArr = str1.split(',');
		attrArr.forEach(function(d, i){
			var newStr= d.split(":");
			console.log(newStr[0].substr(1,newStr[0].length-2) + "= " + newStr[1].substr(1, newStr[1].length-2));
			nodeEnter.append("text")
				.attr("dy", i*10 +15)
				.attr("dx", 20)
				.text(function(d) { return newStr[0].substr(1,newStr[0].length-2) + "= " + newStr[1].substr(1, newStr[1].length-2); });
		});
	}else{
		
	}
 });

  // Transition nodes to their new position.
  nodeEnter.transition()
      .duration(duration)//Note: It tells the duration of tree to be visible when we load the page. More duration more time will ti take
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
      .style("opacity", 1);

  // Update the links…
  var link = svg.selectAll("path.link")
      .data(tree1.links(nodes), function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link");
      
  // Transition links to their new position.
  link.transition()
      //.duration(duration)
      .attr("d", diagonal);

}

function color(d) {
  return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}

</script>

＆＃13;

请帮我解决此问题。

根据json元素

0 个答案: