D3 - 强制布局，圈内圆圈

在学习D3.js的过程中D3 - 强制布局，圈内圆圈

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

这可能吗？

enter image description here

来源

2013-07-20 paligap

是的，这是可能的。强制布局与正在绘制的内容无关，因此您可以有一组对象而不是单个对象。 –

谢谢拉尔斯。你有一个例子吗？你是说我可以为每个节点创建多个形状？对不起，我只是习惯了D3。 – paligap

我没有找到一个例子，但是，基本上就是这样。 –

你甚至都不需要使用以外的任何其他一个基本的SVG圈，当你在大多数例子找到。只需将数据绑定到它，应用笔划，并将笔划宽度attr设置为其他变量。或者r - otherVar，我相信你可以指出这一点。

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

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

d3/svg是你不得不猛冲头的东西。我强烈建议花一些时间创建一个沙箱环境，以便快速测试新事物，保存并刷新浏览器以查看结果。最大限度地缩短周转时间是关键。

来源

2013-07-20 01:28:11 roippi

这是一个有趣的想法，但我希望在不改变中风的情况下达到预期的效果。我已经在帮助屏幕上的形状理解的圆上应用笔划。 – paligap

好吧，没关系，如果你想建立自己的形状，你可以做到这一点。正如拉尔斯所说，力布局并不在乎你制作节点的样子。我将编辑更多信息。 – roippi

我似乎无法找到的是如何创建由两个圆形组成的组的语法。为不同类型的SVG形状创建组是可以的，但是如何将两个圆组合在一起？ – paligap

感谢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);

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

enter image description here

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

enter image description here

来源

2013-07-20 12:42:40 paligap

干杯。感谢您发布您的解决方案，这对那些通过Google搜索绊倒线索的人来说总是有帮助的。 – roippi

D3 - 强制布局，圈内圆圈

回答

相关问题