D3 - 强制布局，圆内圈

Question

在学习D3.js的过程中。

是否可以使用力布局将圆圈放置在另一个圆形状中，如图所示。我希望在每个节点的单个圆圈到显示每个节点两个圆圈的显示之间进行转换。有效甜甜圈的大小用于说明数据中的另一个变量。

这可能吗？

Answer 1

在大多数示例中，您甚至不需要使用基本svg圈以外的任何内容。只需将数据绑定到它，应用笔划，并将stroke-width attr设置为您的其他变量。或r - otherVar，我相信你可以找出那部分。

如果这不满足，建立自己的形状。 'g' svg element是一个容器元素，可以让你构建任何你喜欢的东西。在g中添加两个圆圈，按照您喜欢的方式填充它们。确保以正确的顺序添加它们，因为svg没有“on top”的概念，所以只是按照添加它们的顺序绘制。

编辑：好的，快速演示，这样你就可以学习一些语法。我没有添加任何评论，但希望代码非常冗长和直接。 Find it here.

d3 / svg是你必须暂时搁浅一下的东西。我强烈建议花一些时间创建一个沙盒环境，您可以在其中快速测试新内容，保存，刷新浏览器以查看结果。最小化周转时间是关键。

Answer 2

感谢roippi，我能够创建一个包含两个圆形的组。

var nodeCircles = svg.selectAll("g")
    .data(nodes);

    // Outer circle 
var outer = nodeCircles
    .enter()
    .append("circle")
    .attr("class", "node_circle")
    .attr("r", function(d) { return d.radius_plus; })
    .style("fill", function(d) { return d.color_plus; })    
    .style("opacity", 0);   

    // Inner circle
var inner = nodeCircles
    .enter()
    .append("circle")
    .attr("class", "node_circle")
    .attr("r", function(d) { return d.radius; })        
    .style("fill", function(d) { return d.color; })
    .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })    
    .on("mouseover", mouseOver)
    .on("mouseout", mouseOut)
    .call(force.drag);

通过按钮切换外圈可见性。

如上所述，我使用基于桌面的IDE来运行/测试可视化语言。目前，IDE支持用D3.js，Raphael，Processin.js，Paper.js和Dygraphs编写的研究。图片如下......