d3.js将元素附加到节点取决于实体 [英] d3.js append element to node depends on entity

问题描述

我使用d3.js强制布局。不是在json每个节点有属性extraData和它的数组。不是所有的节点都有这个属性。我需要检查，当这个属性，在extraData中为每个添加圈子与节点

i am working with d3.js force layout. not in json each node having property "extraData"and it's array. not all node having this property. i need to check when this property there add circles for each in "extraData" with node

我做一些代码

gStates = gStates.data(nodes);

    var gState = gStates.enter()
        .append("g")
        .attr({
            "transform": function (d) {
                return "translate(" + [d.x, d.y] + ")";
            },
            'class': 'node'
        })
        .call(drag);

    gState.append("circle")
        .attr({
            r: radius + 5,
            class: 'outer'
        });
gStates
        .filter(function(d) { if(d.extraData)return d; })
        .append("circle")
        .attr("r", function(d,i) { return 5+i; });

但是它只添加一个圈子任何使用完整示例或链接将是伟大的

but it 's adding only one circle any use full example or link will be great

当节点在extraData中有3个元素时，节点应该显示一个大圆圈和3个小圆圈。就像文字

when node having 3 element in "extraData" then node should display one big circle and 3 small circle surrounded it. just like text

这里我在 fiddle 有json在javascript有两个数组inputList和outputList的开始，我需要显示圆的每个输入和输出环绕到主圈

here i create scenario in fiddle there is json at starting of javascript having two array inputList and outputList , i need to show circle for each input and output surround to main circle

推荐答案

过滤gStates选择

Filter the gStates selection

gStates.filter(function(d){ return d.extraData; })

进行阴影选择：

     .selectAll('.extraCircles')

到它

        .data(function(d){ return d.extraData; ).enter()

并附加一个圆圈

      .append('circle')
        .attr("r", function(d,i) { return 5+i; });

这篇关于d3.js将元素附加到节点取决于实体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！