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...

属性对我很重要。

这就是我的树目前的样子：

http://i.stack.imgur.com/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。

D3 - 如果文本以字符“f”开头，则追加rect，否则追加圆圈

1 个答案: