xypaul/jsbin.adUnIwuH.html

## jsbin.adUnIwuH.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Rename tree and get underlying data to push to server." />
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script>
    var money;
  </script>


</body>
</html>

## jsbin.adUnIwuH.js
var data = {
  "name": "Blog",
  "children": [
    {
      "name": 'Sylvia',
      "children": [
         {"name": "Tom"},
         {"name": "Jeft"},
         {"name": "Buffy"}
      ]
    },
    {
      "name": "David",
      "children": [
         {"name": "Jeft"},
         {
           "name": "Buffy",
           "children": [
             {'name': "test"}
           ]
         }
     ]
    }
  ]
};


var canvas = d3.select("body").append('svg')
  .attr("width",500)
  .attr("height",500)
  .append('g')
    .attr("transform", "translate(50,50)");


var draw = (function() {

  var tree = d3.layout.tree()
  .size([400,300]);

// Let D3 convert JSON into d3.node array
var nodes = tree.nodes(data);
var linkedNodes = tree.links(nodes); //Creates a start and end


// Add all the nodes
var node = canvas.selectAll('.node')
  .data(nodes);


  node
  .enter()
  .append('g')
    .attr('class','node')
    .attr('transform', function(d){ return "translate(" + d.y + "," + d.x + ")"; });


// Add circle
node.append("circle")
  .attr('r', 5)
  .attr("fill", 'green');


// Add text
node.append("text")
  .text(function(d){ return d.name; })
  .on('click', function(d){
    var result = prompt('Change the name of the node',d.name);
    if(result) {
      d.name = result;

          var node1 = canvas.selectAll('.node').data(nodes);

    node1.select('text')
      .text(function(d){ return d.name; });


      console.log(filterData(node1.data()[0]))// This will give the data as put into the function a the top. Now you only need to loop through the array to remove the additional attributes d3 has added.

      money = node1.data()[0];

    }


  });


   function filterData(data) {
      if(data.size){
          var output = {};
          d3.keys(data).forEach(function(key){
              if(["depth","x","x0","y","y0","parent","children","_children"].indexOf(key) == -1){
                  output[key] = data[key];
              }
          });
          return output;//{name:data.name,size:data.size};
      } else if(!data.children){
          var output = {};
          d3.keys(data).forEach(function(key){
              if(["depth","x","x0","y","y0","parent","children","_children","size"].indexOf(key) == -1){
                  output[key] = data[key];
              }
          });
          /* var size = getSize(data._children,0);
          output["size"] = size; */
          return output;//{name:data.name,size:size};
      } else {
          // var name = data.name;
          var children = [];
          for(var child in data.children){
              children.push(filterData(data.children[child]));
          }
          var output = {};
          d3.keys(data).forEach(function(key){
              if(["depth","x","x0","y","y0","parent","children","_children","size"].indexOf(key) == -1){
                  output[key] = data[key];
              }
          });
          output["children"] = children;
          return output;//{name:name,children:children};
      }
  }


// Setup connection
var diagonal = d3.svg.diagonal()
  .projection(function(d){return [d.y, d.x];});

// Create links
var links = canvas.selectAll('.links')
  .data(linkedNodes)
  .enter()
  .append("path")
    .attr("class", "links")
    .attr("fill", 'none')
    .attr("stroke",'grey')
    .attr('d', diagonal);

  return 'done';
});


draw();
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Rename tree and get underlying data to push to server." />
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<script>
	var money;
	</script>


	</body>
	</html>
	var data = {
	"name": "Blog",
	"children": [
	{
	"name": 'Sylvia',
	"children": [
	{"name": "Tom"},
	{"name": "Jeft"},
	{"name": "Buffy"}
	]
	},
	{
	"name": "David",
	"children": [
	{"name": "Jeft"},
	{
	"name": "Buffy",
	"children": [
	{'name': "test"}
	]
	}
	]
	}
	]
	};


	var canvas = d3.select("body").append('svg')
	.attr("width",500)
	.attr("height",500)
	.append('g')
	.attr("transform", "translate(50,50)");





	var draw = (function() {

	var tree = d3.layout.tree()
	.size([400,300]);

	// Let D3 convert JSON into d3.node array
	var nodes = tree.nodes(data);
	var linkedNodes = tree.links(nodes); //Creates a start and end


	// Add all the nodes
	var node = canvas.selectAll('.node')
	.data(nodes);


	node
	.enter()
	.append('g')
	.attr('class','node')
	.attr('transform', function(d){ return "translate(" + d.y + "," + d.x + ")"; });


	// Add circle
	node.append("circle")
	.attr('r', 5)
	.attr("fill", 'green');


	// Add text
	node.append("text")
	.text(function(d){ return d.name; })
	.on('click', function(d){
	var result = prompt('Change the name of the node',d.name);
	if(result) {
	d.name = result;

	var node1 = canvas.selectAll('.node').data(nodes);

	node1.select('text')
	.text(function(d){ return d.name; });


	console.log(filterData(node1.data()[0]))// This will give the data as put into the function a the top. Now you only need to loop through the array to remove the additional attributes d3 has added.

	money = node1.data()[0];

	}




	});


	function filterData(data) {
	if(data.size){
	var output = {};
	d3.keys(data).forEach(function(key){
	if(["depth","x","x0","y","y0","parent","children","_children"].indexOf(key) == -1){
	output[key] = data[key];
	}
	});
	return output;//{name:data.name,size:data.size};
	} else if(!data.children){
	var output = {};
	d3.keys(data).forEach(function(key){
	if(["depth","x","x0","y","y0","parent","children","_children","size"].indexOf(key) == -1){
	output[key] = data[key];
	}
	});
	/* var size = getSize(data._children,0);
	output["size"] = size; */
	return output;//{name:data.name,size:size};
	} else {
	// var name = data.name;
	var children = [];
	for(var child in data.children){
	children.push(filterData(data.children[child]));
	}
	var output = {};
	d3.keys(data).forEach(function(key){
	if(["depth","x","x0","y","y0","parent","children","_children","size"].indexOf(key) == -1){
	output[key] = data[key];
	}
	});
	output["children"] = children;
	return output;//{name:name,children:children};
	}
	}



	// Setup connection
	var diagonal = d3.svg.diagonal()
	.projection(function(d){return [d.y, d.x];});

	// Create links
	var links = canvas.selectAll('.links')
	.data(linkedNodes)
	.enter()
	.append("path")
	.attr("class", "links")
	.attr("fill", 'none')
	.attr("stroke",'grey')
	.attr('d', diagonal);

	return 'done';
	});


	draw();