在php中动态显示d3.js中的节点中的图像

Question

我正在开发一个应用程序，它将获得用户声明的fb系列，它将生成一棵树。我能用d3.js用这个脚本做到这一点。

<script src="<?php echo base_url()?>assets/js/d3.v3.min.js"></script>


<script>

var data = <?php echo $jData ?>;

var dataMap = data.reduce(function(map, node) {
    map[node.name] = node;
    return map;
}, {});

var treeData = [];

data.forEach(function(node) {
 // add to parent

 var parent = dataMap[node.parent];

  if (parent) {
  // create child array if it doesn't exist
        (parent.children || (parent.children = []))
   // add node to child array
        .push(node);
  } else {
  // parent is null or missing
    treeData.push(node);
 }
});
// ************** Generate the tree diagram  *****************
var margin = {top: 50, right: 180, bottom: 50, left: 180},
 width = 1000 - margin.right - margin.left,
 height = 800 - margin.top - margin.bottom;

var i = 0;

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

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

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 + ")");

root = treeData[0];

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 * 130; });

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

  // Enter the nodes.
  var nodeEnter = node.enter().append("g")
   .attr("class", "node")
   .attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; });

nodeEnter.append("circle")
   .attr("class", "logo")
   .attr("r", function(d) { return d.value; })
   .style("stroke", function(d) { return d.type; })
   .style("fill", function(d) { return d.img; })
   .style("stroke-width", function(d) { return d.val; })
   ;

 nodeEnter.append("text")
   .attr("y", function(d) { 
    return d.children || d._children ? -18 : 10 ; })
   .attr("dy", ".35em")
   .attr("text-anchor", "middle")
   .text(function(d) { return d.name; })
   .style("fill-opacity", 1);

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

  // Enter the links.
  link.enter().insert("path", "g")
   .attr("class", "link")
   .style("stroke", function(d) { return d.target.level; })
   .attr("d", diagonal);
}

现在，我想要的是在每个节点中我想显示各自的图像。我能够用这段代码完成它。

    <?php
    foreach ($newFamily as $families) {

    $id = $families['id'];
    $relationship = $families['relationship'];
    $name = $families['name'];

    if($relationship == "grandfather"){
    $pic_grandfather = "http://graph.facebook.com/".$id."/picture";?>
        if($gf !=0){
              ?>
        <svg id="mySvg" width="80" height="80">
        <defs id="mdef">
        <pattern id="image" x="0" y="0" height="40" width="40">
        <image x="0" y="0" width="60" height="60" xlink:href="<?php echo $pic_grandfather; ?>";></image>
        </pattern>
        </defs>
        </svg>
       <?php


            $myData[] = array('name'=>$name,'parent'=>'null','img'=>'url(#image)', 'val'=> '3', 'value'=>'30','level'=>'blue', 'type'=>'orange');       

        }
     }

＆GT;

问题是当用户具有例如3个表兄弟时，将显示的图像都是相同的。我坚持这个。