javascript - D3 - 如果文本以字符 'f' 开头，则附加矩形，否则附加圆形

Question

我正在尝试构建一个更动态的树，树中的每个节点都有一个像“7”或“13”这样的数字，或者像“f[10]”这样的数字。我在树的中间使用了带有文字的空心圆圈。然而，它看起来很糟糕，因为当节点有“f[10]”时，文本会溢出到圆圈之外。我正在寻找类似这样的伪代码:

For each data point:
    if data.txt.charAt(0) = 'f':
         append rect
         .attr("size", etc...
    else:
         append circle
         .attr("r", etc...

这些属性对我来说很重要。

这就是我的树当前的样子:

/image/VhYVK.png

这是我在pastebin中的js文件:

http://pastebin.com/yWZWdcP4

我用它来填充

<div id="recursionTreeOne"></div>

在我的 index.html 文件中。

感谢您的帮助!

Answer 1

You could use a .filter:

node.filter(function(d){
  return d.num.charAt(0) != 'f'
})
.append("svg:circle")
.attr("r", 10)
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", "1");

node.filter(function(d){
  return d.num.charAt(0) == 'f'
})
.append("rect")
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", "1")
.attr("width", 50)
.attr("height", 50)
.attr("x", -25)
.attr("y", -10);

这是一个example .