Javascript 如何根据单击的D3.JS元素绑定数据？

我需要帮助将JSON数据绑定到单击D3元素的元素。我的主要问题是，我是D3新手，不知道如何调用或选择元素。因为它们都是在我的组织树中生成的。单击元素将显示该元素的子元素。单击其中一个元素后，我需要JSON描述显示在不同的区域中

document.addEventListener("DOMContentLoaded", function() {
var margin = {
        top: 50,
        right: 300,
        bottom: 50,
        left: 300
    },
    width = 1280 - margin.right - margin.left,
    height = 720 - margin.top - margin.bottom;

var i = 0,
    duration = 750,
    root;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) {
        return [d.y, d.x]; //switch Y and X to complete vertically
    });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


   var data = {  
   "fname":"Title",
   "children":[  
  {  
     "fname":"Element1",
     "children":[  
        {  
           "fname":"1. Child",
           "desc": "This is my description"
        },
        {  
           "fname":"2. Child",

        },
        {  
           "fname":"3. Child",
           "children":[  
              {  
                 "fname":"1. SubChild",

              },
              {  
                 "fname":"2. SubChild",

              },
              {  
                 "fname":"3. SubChild",

              },
              {  
                 "fname":"4. SubChild",

              },
              {  
                 "fname":"5. SubChild",

              },

           ]
        },
        {  
           "fname":"4. Child",

        },
        {  
           "fname":"5. loanEndCoolOff",

        },
        {  
           "fname":"6. Child",

        },
        {  
           "fname":"7. Child",

        },
        {  
           "fname":"8. Child",

        },
        {  
           "fname":"9. Child",

        },
        {  
           "fname":"10. Child",

        },
        {  
           "fname":"11. Child",
           "children":[  
              {  
                 "fname":"11.1. SubChild",

              },
              {  
                 "fname":"11.2. SubChild",

              },

           ],

        },
        {  
           "fname":"12. Child",

        },

     ]
  },


]
}

    root = data; 
        root.x0 = height / 2;  
        root.y0 = 0; 

        function collapse(d){  
    if (d.children)   {  
        d._children = d.children; 
                d._children.forEach(collapse); 
                d.children = null;
    }
    }

    root.children.forEach(collapse);
    update(root);

    function update(source) {

    // Compute the new tree layout.
    var nodes = tree.nodes(root).reverse(),
        links = tree.links(nodes);

    // Normalize for fixed-depth.
    nodes.forEach(function(d) {
        d.y = d.depth * 220; // change to increase/decrease the distance between "limbs"
    });

    // Update the nodes…
    var node = svg.selectAll("g.node")
        .data(nodes, function(d) {
            return d.id || (d.id = ++i);
        });

    // Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
            return "translate(" + source.y0 + "," + source.x0 + ")"; //switch Y and X to complete vertically
        })
        .on("click", click);

    // append description    
    nodeEnter.append("text")
    .attr("x", function(d) { return d.children || d._children ? -50 : 50; })
    .attr("dy", ".35em")
    .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
    .text(function(d) { return d.desc; })
    .style("fill-opacity", 1e-6);

    nodeEnter.append("circle")
        .attr("r", 1e-6)
        .style("fill", function(d) {
            return d._children ? "yellow" : "#fdbd44";
        });

    nodeEnter.append("text")
    .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
    .attr("dy", ".35em")
    .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
    .text(function(d) { return d.fname; })
    .style("fill-opacity", 1e-6);

    // Transition nodes to their new position.
    var nodeUpdate = node.transition()
        .duration(duration)
        .attr("transform", function(d) {
            return "translate(" + d.y + "," + d.x + ")"; //switch Y and X to complete vertically
        });

    nodeUpdate.select("circle")
        .attr("r", 5) //attr changes size of the circle 
        .style("fill", function(d) { return d._children ? "#fdbf44" : "white"; });

    nodeUpdate.selectAll("text")
        .style("fill-opacity", 1);

    // Transition exiting nodes to the parent's new position.
    var nodeExit = node.exit().transition()
        .duration(duration)
        .attr("transform", function(d) {
            return "translate(" + source.y + "," + source.x + ")"; //switch Y and X to complete vertically
        })
        .remove();

    nodeExit.select("circle")
        .attr("r", 1e-6);

    nodeExit.select("text")
        .style("fill-opacity", 1e-6);

    // Update the links…
    var link = svg.selectAll("path.link")
        .data(links, function(d) {
            return d.target.id;
        });

    // Enter any new links at the parent's previous position.
    link.enter().insert("path", "g")
        .attr("class", "link")
        .attr("d", function(d) {
            var o = {
                y: source.y0,
                x: source.x0 //switch Y and X to complete vertically
            };
            return diagonal({
                source: o,
                target: o
            });
        });

    // Transition links to their new position.
    link.transition()
        .duration(duration)
        .attr("d", diagonal);

    // Transition exiting nodes to the parent's new position.
    link.exit().transition()
        .duration(duration)
        .attr("d", function(d) {
            var o = {
                y: source.y, //switch Y and X to complete vertically
                x: source.x
            };
            return diagonal({
                source: o,
                target: o
            });
        })
        .remove();

    // Stash the old positions for transition.
    nodes.forEach(function(d) {
        d.y0 = d.y; //switch Y and X to complete vertically
        d.x0 = d.x;
    });

}
// Toggle children on click.
function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
    update(d);
}

});

---

我要用这个来工作

这是最好的方法吗

    nodeEnter.append("text")
    .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
    .attr("dy", ".35em")
    .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
    .text(function(d) { return d.fname; })
    .on("click", function(d) {
        var theDiv = document.getElementById("desc");
        var content = document.createTextNode(d.desc);
        theDiv.appendChild(content);
        }) // on click of element display the description 
    .style("fill-opacity", 1e-6);