Javascript d3中的泡泡树？

D3中是否有等效的a实现？在我提供的链接中，气泡树是在RaphaelJS和jQuery中实现的

---

你的问题的直接答案是否定的

使用上的资源、您已经知道的信息以及D3在GitHub上的文档中提供的信息，您应该能够为D3创建自己的泡泡树

这是我很久以前用来可视化二叉树数据的JavaScript片段：

var updateVisual;

updateVisual = function() {
    var drawTree, out;
    drawTree = function(out, node) {
        var col, gray, i, line, lineElt, lines, sub, _results, _results1;
        if (node.lines) {
            out.appendChild(document.createElement("div")).innerHTML = "<b>leaf</b>: " + node.lines.length + " lines, " + Math.round(node.height) + " px";
            lines = out.appendChild(document.createElement("div"));
            lines.style.lineHeight = "6px";
            lines.style.marginLeft = "10px";
            i = 0;
            _results = [];
            while (i < node.lines.length) {
                line = node.lines[i];
                lineElt = lines.appendChild(document.createElement("div"));
                lineElt.className = "lineblock";
                gray = Math.min(line.text.length * 3, 230);
                col = gray.toString(16);
                if (col.length === 1) col = "0" + col;
                lineElt.style.background = "#" + col + col + col;
                console.log(line.height, line);
                lineElt.style.width = Math.max(Math.round(line.height / 3), 1) + "px";
                _results.push(i++);
            }
            return _results;
        } else {
            out.appendChild(document.createElement("div")).innerHTML = "<b>node</b>: " + node.size + " lines, " + Math.round(node.height) + " px";
            sub = out.appendChild(document.createElement("div"));
            sub.style.paddingLeft = "20px";
            i = 0;
            _results1 = [];
            while (i < node.children.length) {
                drawTree(sub, node.children[i]);
                _results1.push(++i);
            }
            return _results1;
        }
    };
    out = document.getElementById("btree-view");
    out.innerHTML = "";
    return drawTree(out, editor.getDoc());
};

var-updateVisual；
updateVisual=函数（）{
从树上爬出来；
drawTree=函数（输出，节点）{
变量col、gray、i、line、lineElt、line、sub、_结果、_结果1；
if（节点行）{
out.appendChild（document.createElement（“div”））.innerHTML=“leaf:”+node.lines.length+“lines”，+Math.round（node.height）+“px”；
line=out.appendChild（document.createElement（“div”）；
lines.style.lineHeight=“6px”；
lines.style.marginLeft=“10px”；
i=0；
_结果=[]；
而（i

---

只需插入一些圆形元素，并在圆形庄园中稍微操纵它，您就应该有一个好的程序集

您可以使用，基本上您可以将想要的任何数据绑定到图形中的形状和自定义参数，以使它们能够相互定位。另一种选择是部队布局。

给你。我没有添加文字或装饰，而是肉和土豆：

功能bubbleChart（配置）{
var aspectRatio=1，
边距={top:0，right:0，bottom:0，left:0}，
radiusScale=d3.scale.sqrt（），
扫描=功能（f、数据、a）{
a=a==未定义？0:a；
var结果=[a]；
data.forEach（函数（d，i）{
a=f（a，d）；
结果：推（a）；
});
返回结果；
},
colorScale=d3.scale.category20（），
结果=功能（选择）{
选择。每个功能（数据）{
var outerWidth=$（this）.width（），
外光=外宽/纵横比，
宽度=外径-边距.left-边距.right，
高度=外部高度-边距.top-边距.bottom，
最小尺寸=数学最小值（宽度、高度），
求和=数据[1]。减少（函数（a，d）{
返回a+d[1]；
}, 0),
半径分数=数据[1]。映射（函数（d）{
返回Math.sqrt（d[1]/sum）；
}),
radiusNormalSum=半径分数。减少（函数（a，d）{
返回a+d；
}, 0),
扫描=扫描（功能（a，d）{
返回a+d；
}，radiusFractions.map（函数（d）{
返回d/半径正常值；
}), 0);
radiusScale.domain（[0，sum]）range（[0，smallestDimension/6]）；
var svg=d3.select（this）.selectAll（'svg'）.data（[data]），
svgEnter=svg.enter（）.append（'svg'）；
attr（'width'，outerWidth）.attr（'height'，outerHeight）；
var gEnter=svgEnter.append（'g'），
g=svg.select（'g'）.attr（'transform'，'translate（'+margin.left+'+margin.top+'）），
circleRing=g.selectAll（'circle.ring'）。数据（数据[1]），
Circleringeter=circleRing.enter（）.append（'circle'）.attr（'class'，'ring'）；
circleRing.attr（'cx'，函数（d，i）{
返回最小维度/3*Math.cos（2*Math.PI*（扫描[i]+扫描[i+1]）/2）+宽度/2；
}).attr（'cy'，函数（d，i）{
返回最小维度/3*Math.sin（2*Math.PI*（扫描[i]+扫描[i+1]）/2）+高度/2；
}).attr（'r'，函数（d）{
返回半径刻度（d[1]）；
}).样式（“填充”，功能（d）{
返回色标（d[0]）；
});
var circleMain=g.selectAll（'circle#main'）。数据（[data[0]]），
circleMainEnter=circleMain.enter（）.append（'circle'）.attr（'id'，'main'）；
circleMain.attr（'cx'，width/2）.attr（'cy'，height/2）.attr（'r'，radiuscale（sum））.style（'fill'，function（d）{
返回色标（d）；
});
});
};
result.aspectRatio=函数（值）{
if（value==未定义）返回aspectRatio；
aspectRatio=值；
返回结果；
};
result.margin=函数（值）{
如果（值===未定义）返回保证金；
保证金=价值；
返回结果；
};
返回结果；
}
var myBubbleChart=bubbleChart（）.margin({
排名：1，
右:1,，
底部：1，
左：1
});
var数据=[“随机名称，随机数量”[“伊曼纽尔”，“0.4]，“帕斯卡”，“42.9]，“玛丽莎”，“3.3]，“哈杜莫德”，“4.5]，“福克”，“3.2]，“提奥”，“4.7]，“巴纳巴斯”，“1.0]，“莱桑”，“11.1]，“朱莉娅”，“0.7]，“伯吉斯”，“28.2]；
d3.选择（'#here'）.datum（data）.call（myBubbleChart）