d3.js强制图 - 图像/节点链接和动画 [英] d3.js Force Chart - image/node linkage and animation

问题描述

我已经增强了力图来比较两个配置文件。我试图让主节点拥有一个图像

*

http://jsfiddle.net/LsMZp/26/

其余的问题。

• 需要移除游牧点节点 - 如果用户共享相同的兴趣 - 它们按预期链接 - 但这会导致额外的节点 - 在节点构造过程中清除这一点的方法 - 或者在渲染之前应该删除nodeId？


• 用户图像看起来像是分割在象限中，这里是代码

x和y设置为0.

  $ .each（userData，function（index，value）{
 var defs = patternsSvg.append（'svg：defs'）; 
 defs.append（'svg ：pattern'）
 .attr（'id'， - + index + - + value.userName.toLowerCase（））
 .attr（'patternUnits'，'userSpaceOnUse'）
 .attr（'width'，100）
 .attr（'height'，100）
 .append（'svg：image'）
 .attr（'xlink：href' value.userImage）
 .attr（'x'，0）
 .attr（'y'，0）
 .attr（'width'，100）
 .attr 'height'，100）; 
 
}）; 
  

I've enhanced a force diagram to compare two profiles. I am trying to have the main node take on an image

http://jsfiddle.net/LsMZp/5/

• how do I get the image to be centrally aligned (sized correctly) and the thumbnail data passed in more dynamically from the json string.
• also if someone shares a particular interest - is there a better way of handling it - if the information is duplicated a link is formed but a nomad node remains left and unlinked.
• also is there a way to provide a stir of motion in the application, so it doesn't ever completely settle

https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSTzjaQlkAJswpiRZByvgsb3CVrfNNLLwjFHMrkZ_bzdPOWdxDE2Q - this is the image I'm using as a mock.

    var circle = svg.append("svg:g")
.selectAll("circle")
.data(force.nodes())
.enter()
.append("svg:circle").attr("r", function(d) {
                    return getRadius(d);
                }).style("fill", function(d) {
                    if(d.group == "User"){
                         return "url(#img1)"; 
                    }else{
                        return color(d.group);
                    }
                }).call(force.drag);

                if (options.nodeLabel) {
                    circle.append("title").text(function(d) {
                        return d[options.nodeLabel];
                    });
                }

                if (options.linkName) {
                    path.append("title").text(function(d) {
                        return d[options.linkName];
                    });
                }

解决方案

I've enhanced the system to take an array of user information. This is then used to build the nodes.

*Latest Code http://jsfiddle.net/LsMZp/49/ *

http://jsfiddle.net/LsMZp/26/

the remaining issues here.

• the need to remove nomad nodes - if user's share the same interest - they link as expected - but this leads an additional node - is there a way to clear this up during node construction - or should duplicate nodeId's be removed before rendering?
• the user images appear to be split in quadrants as if they are not centred properly, not sure why here is the code

x and y are set to 0.

 $.each(userData, function( index, value ) {
        var defs = patternsSvg.append('svg:defs');
                    defs.append('svg:pattern')
                        .attr('id', "--"+index+"-"+value.userName.toLowerCase())
                        .attr('patternUnits', 'userSpaceOnUse')
                        .attr('width', 100)
                        .attr('height',100)
                        .append('svg:image')
                        .attr('xlink:href', value.userImage)
                        .attr('x', 0)
                        .attr('y', 0)
                        .attr('width', 100)
                        .attr('height', 100);

    });

这篇关于d3.js强制图 - 图像/节点链接和动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！