在学习D3.js的过程中。
是否可以根据图片使用强制布局将圆形放置在另一个圆形内。我希望在每个节点的单个圆圈之间转换为每个节点显示两个圆圈的显示。有效甜甜圈的大小用于说明数据中的另一个变量。
这可能吗？
【问题讨论】：
标签： javascript svg d3.js force-layout
您甚至不需要使用除了基本的 svg 圆圈以外的任何东西，正如您在大多数示例中发现的那样。只需将数据绑定到它，应用笔画，然后将笔画宽度属性设置为您的其他变量。或者r - otherVar，我相信你能弄清楚那部分。
如果这不满足，构建你自己的形状。 'g' svg element 是一个容器元素，可以让你构建任何你喜欢的东西。将两个圆圈添加到 g，按照您的喜好填充它们。确保以正确的顺序添加它们，因为 svg 没有“在顶部”的概念，事物只是按照添加它们的顺序绘制。
编辑：好的，快速演示，这样你就可以学习一些语法。我没有添加任何 cmets，但希望代码非常冗长和简单。 Find it here.
d3/svg 是你必须用头猛击一段时间的东西。我强烈建议您花一些时间创建一个沙盒环境，您可以在其中快速测试新事物、保存、刷新浏览器以查看结果。缩短周转时间是关键。
【讨论】：
感谢 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 编写的研究。下图……
【讨论】：