javascript - D3——强制布局，圈内圈

Question

在学习D3.js的过程中。

是否可以根据图片使用强制布局将圆形放置在另一个圆形内。我希望在每个节点的单个圆圈之间转换为每个节点显示两个圆圈的显示。有效甜甜圈的大小用于说明数据中的另一个变量。

这可能吗？

Answer 1

正如您在大多数示例中发现的那样，您甚至不需要使用基本 svg 圆圈以外的任何东西。只需将数据绑定到它，应用笔画，然后将笔画宽度属性设置为您的其他变量。或者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 编写的研究。下图...