D3-强制布局，在圆内圆

Question

在学习D3.js的过程中。

是否可以使用力的布局将一个圆放置在图片中的另一个圆形状内。 我希望在每个节点一个圆圈之间过渡到一个显示每个节点两个圆圈的显示器。 有效甜甜圈的大小用于说明数据中的另一个变量。

这可能吗？

Answer 1

在大多数示例中，您甚至不需要使用基本的svg圈以外的任何东西。 只需将数据绑定到它，应用笔触，然后将笔触宽度attr设置为其他变量。 或者r - otherVar ，我相信您可以弄清楚那部分。

如果不满意，请建立自己的形状。 'g'svg元素是一个容器元素，可让您随意构建。 将两个圆圈添加到ag中，然后按您的喜好填充它们。 确保按正确的顺序添加它们，因为svg没有“置顶”的概念，因此只需按照添加它们的顺序绘制内容即可。

编辑：好的，快速演示，以便您可以学习一些语法。 我没有添加任何注释，但希望代码非常冗长和直接。 在这里找到。

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编写的研究。 下图...