Javascript d3.js将图像显示为圆形

代码：

// some colour variables
var tcBlack = "#130C0E";

// rest of vars
var w = 1255,
h = 925,
maxNodeSize = 50,
x_browser = 10,
y_browser = 15,
root;

var vis;
var force = d3.layout.force(); 

vis = d3.select("#vis").append("svg").attr("width", w).attr("height", h);

d3.json("marvel.json", function(json) {

root = json;
root.fixed = true;
root.x = w / 2;
root.y = h / 4;


    // Build the path
var defs = vis.insert("svg:defs")
  .data(["end"]);


defs.enter().append("svg:path")
  .attr("d", "M0,-5L10,0L0,5");

 update();
});



function update() {
  var nodes = flatten(root),
  links = d3.layout.tree().links(nodes);

 // Restart the force layout.
 force.nodes(nodes)
    .links(links)
    .gravity(0.05)
.charge(-1500)
.linkDistance(100)
.friction(0.5)
.linkStrength(function(l, i) {return 1; })
.size([w, h])
.on("tick", tick)
    .start();

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

path.enter().insert("svg:path")
  .attr("class", "link")
  // .attr("marker-end", "url(#end)")
  .style("stroke", "#eee");


// Exit any old paths.
path.exit().remove();



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


// Enter any new nodes.
var nodeEnter = node.enter().append("svg:g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
  .on("click", click)
  .call(force.drag);

// Append a circle
nodeEnter.append("svg:circle")
  .attr("r", function(d) { return Math.sqrt(40000) / 10 || 30; })
  .style("fill", "#ffffff");

// Append images
var images = nodeEnter.append("svg:image")
    .attr("xlink:href",  function(d) { return d.img;})
    .attr("x", function(d) { return -25;})
    .attr("y", function(d) { return -25;})
    .attr("height", 50)
    .attr("width", 50);

// make the image grow a little on mouse over and add the text details on click
var setEvents = images
      // Append hero text
      .on( 'click', function (d) {
          // d3.select("h1").html(d.hero); 
          d3.select("h3").html(d.name); 
          // d3.select("h3").html ("Take me to " + "<a href='" + d.link + "' >"  + d.hero + " web page ⇢"+ "</a>" ); 
       })

      .on( 'mouseenter', function() {
        // select element in current context
        d3.select( this )
          .transition()
          .attr("x", function(d) { return -60;})
          .attr("y", function(d) { return -60;})
          .attr("height", 100)
          .attr("width", 100);
      })
      // set back
      .on( 'mouseleave', function() {
        d3.select( this )
          .transition()
          .attr("x", function(d) { return -25;})
          .attr("y", function(d) { return -25;})
          .attr("height", 50)
          .attr("width", 50);
      });

 // Append hero name on roll over next to the node as well
 nodeEnter.append("text")
    .attr("class", "nodetext")
    .attr("x", x_browser)
    .attr("y", y_browser +15)
    .attr("fill", "red")
    .text(function(d) { return d.name; });


 // Exit any old nodes.
 node.exit().remove();


 // Re-select for update.
 path = vis.selectAll("path.link");
 node = vis.selectAll("g.node");

function tick() {


path.attr("d", function(d) {

 var dx = d.target.x - d.source.x,
       dy = d.target.y - d.source.y,
       dr = Math.sqrt(dx * dx + dy * dy);
       return   "M" + d.source.x + "," 
        + d.source.y 
        + "A" + dr + "," 
        + dr + " 0 0,1 " 
        + d.target.x + "," 
        + d.target.y;
});
node.attr("transform", nodeTransform);    
}
}



function nodeTransform(d) {
 d.x =  Math.max(maxNodeSize, Math.min(w - (d.imgwidth/2 || 16), d.x));
 d.y =  Math.max(maxNodeSize, Math.min(h - (d.imgheight/2 || 16), d.y));
 return "translate(" + d.x + "," + d.y + ")";
}


function click(d) {
 if (d.children) {
 d._children = d.children;
 d.children = null;
} else {
 d.children = d._children;
 d._children = null;
}

 update();
}


/**
 * Returns a list of all nodes under the root.
*/ 
function flatten(root) {
  var nodes = []; 
  var i = 0;

  function recurse(node) {
   if (node.children) 
   node.children.forEach(recurse);
   if (!node.id) 
   node.id = ++i;
   nodes.push(node);
  }

recurse(root);
return nodes;
}   

//一些颜色变量
变量tcBlack=“#130C0E”；
//其余的VAR
var w=1255，
h=925，
maxNodeSize=50，
x_=10，
y_=15，
根；
var-vis；
var-force=d3.layout.force（）；
vis=d3。选择（“vis”）.append（“svg”）.attr（“宽度”，w）。attr（“高度”，h）；
d3.json（“marvel.json”，函数（json）{
root=json；
root.fixed=true；
根x=w/2；
根y=h/4；
//修路
var defs=vis.insert（“svg:defs”）
.数据（[“结束]）；
defs.enter（）.append（“svg:path”）
.attr（“d”，“M0，-5L10,0L0,5”）；
更新（）；
});
函数更新（）{
变量节点=展平（根），
links=d3.layout.tree（）.links（节点）；
//重新启动强制布局。
force.nodes（节点）
.链接（links）
.重力（0.05）
。收费（-1500）
.linkDistance（100）
.摩擦力（0.5）
.linkStrength（函数（l，i）{return 1；}）
.尺寸（[w，h]）
.on（“滴答”，滴答）
.start（）；
var path=vis.selectAll（“path.link”）
.data（链接，函数（d）{返回d.target.id；}）；
path.enter（）.insert（“svg:path”）
.attr（“类”、“链接”）
//.attr（“标记结束”、“url（#结束）”）
.风格（“笔划”、“eee”）；
//退出任何旧路径。
path.exit（）.remove（）；
//更新节点…
var node=vis.selectAll（“g.node”）
.data（节点，函数（d）{返回d.id；}）；
//输入任何新节点。
var nodeEnter=node.enter（）.append（“svg:g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）
.on（“单击”，单击）
.呼叫（强制拖动）；
//附加一个圆圈
追加（“svg:circle”）
.attr（“r”，函数（d）{return Math.sqrt（40000）/10 | | 30；}）
.style（“fill”和“#ffffff”）；
//附加图像
var images=nodeEnter.append（“svg:image”）
.attr（“xlink:href”，函数（d）{return d.img；}）
.attr（“x”，函数（d）{return-25；}）
.attr（“y”，函数（d）{return-25；}）
.attr（“高度”，50）
.attr（“宽度”，50）；
//在鼠标上方使图像稍微增长，并在单击时添加文本详细信息
var setEvents=图像
//附加英雄文本
.on（'点击'，功能（d）{
//d3.选择（“h1”）.html（d.hero）；
d3.选择（“h3”）.html（d.name）；
//d3.选择（“h3”）.html（“带我到“+”）；
})
.on（'mouseenter'，function（）{
//选择当前上下文中的元素
d3.选择（本）
.transition（）
.attr（“x”，函数（d）{return-60；}）
.attr（“y”，函数（d）{return-60；}）
.attr（“高度”，100）
.attr（“宽度”，100）；
})
//倒退
.on（'mouseleave'，function（）{
d3.选择（本）
.transition（）
.attr（“x”，函数（d）{return-25；}）
.attr（“y”，函数（d）{return-25；}）
.attr（“高度”，50）
.attr（“宽度”，50）；
});
//在节点旁边的翻滚上附加英雄名称
nodeEnter.append（“文本”）
.attr（“类”、“节点文本”）
.attr（“x”，x_浏览器）
.attr（“y”，y_浏览器+15）
.attr（“填充”、“红色”）
.text（函数（d）{返回d.name；}）；
//退出所有旧节点。
node.exit（）.remove（）；
//重新选择以进行更新。
path=vis.selectAll（“path.link”）；
node=vis.selectAll（“g.node”）；
函数tick（）{
attr（“d”，函数（d）{
变量dx=d.target.x-d.source.x，
dy=d.target.y-d.source.y，
dr=Math.sqrt（dx*dx+dy*dy）；
返回“M”+d.source.x+”，“
+d.source.y
+“A”+dr+，”
+dr+“0,1”
+d.target.x+“，”
+d.target.y；
});
attr（“转换”，nodeTransform）；
}
}
函数节点转换（d）{
d、 x=Math.max（maxNodeSize，Math.min（w-（d.imgwidth/2 | | 16），d.x））；
d、 y=Math.max（maxNodeSize，Math.min（h-（d.imgheight/2 | | | 16），d.y））；
返回“translate”（“+d.x+”，“+d.y+”）；
}
功能点击（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（）；
}
/**
*返回根目录下所有节点的列表。
*/ 
函数展平（根）{
var节点=[]；
var i=0；
函数递归（节点）{
if（节点子节点）
node.children.forEach（递归）；
如果（！node.id）
node.id=++i；
nodes.push（节点）；
}
递归（根）；
返回节点；
}   

我使用上面的代码来显示图像，使用的是

d3.js

。但图像并没有显示为圆形。我希望子节点图像正确地填充圆

所以请帮助解决这个问题。如有答复，将不胜感激。谢谢

这就是我使用的示例：

var-json={
“名称”：“惊奇漫画”，
“img”：https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/marvel.png",
“儿童”：[
{
“姓名”：“英雄”，
“儿童”：[
{
“英雄”：“蜘蛛侠”，
“姓名”：“彼得·本杰明·帕克”，
“链接”：http://marvel.com/characters/54/spider-man",
“img”：https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_spiderman.png",
“规模”：40000
},
{
“英雄”：“惊奇船长”，
“姓名”：“卡罗尔·丹弗斯”，
“链接”：http://marvel.com/characters/9/captain_marvel",
“img”：https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_captainmarvel.png",
“规模”：40000
},
{
“英雄”：“绿巨人”，
“姓名”：“罗伯特·布鲁斯·班纳”，
“链接”：http://marvel.com/characters/25/hulk",
“img”：https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_hulk.png",
“规模”：40000
},
{
“英雄”：“黑寡妇”，
“姓名”：“Natalia‘Natasha’Alianovna Romanova”，
“链接”：http://marvel.com/characters/6/black_widow",
“img”：https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_blackwidow.png",
“规模”：40000
},
{
“英雄”：“敢死队”，
“姓名”：“马修·迈克尔·默多克”，
“链接”：http://marvel.com/characters/11/daredevil",
“img”：https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_daredevil.png",
“尺寸”：