d3.js：链接相关项目答案

【问题标题】：d3.js: linking related itemsd3.js：链接相关项目
【发布时间】：2013-08-22 22:35:43
【问题描述】：

我正在尝试使用 d3.js 创建一个图表，显示项目之间的关系或链接。

基本思想是这样的：

当我悬停或单击其中一项时，相关项会突出显示

我查看了 d3.layout.tree https://github.com/mbostock/d3/wiki/Tree-Layout，但它似乎与我想要做的不同。

我看到了这个小提琴：http://jsfiddle.net/bmdhacks/qsEbd/5/ 这似乎是一个正确方向的开始

基于那个小提琴，我用自己的数据集构建了这个小提琴 http://jsfiddle.net/Ps4Fe/1/ 起初看起来它会起作用。但后来我意识到我的圆圈覆盖在其他圆圈上，并且有多个副本......我明白为什么了。

我构建数据的方式可能存在问题。这是可以改变的。

    var data = {
    "Product": [
        {
            "type": "product",
            "name": "Product 1",
            "links": [
                {
                    "name": "Industry 1",
                    "type": "industry",
                    "percent": 0.12,
                    "count": 149
                },
                {
                    "name": "Industry 2",
                    "type": "industry",
                    "percent": 0.18,
                    "count": 180
                },
                {
                    "name": "Industry 3",
                    "type": "industry",
                    "percent": 0.17,
                    "count": 152
                },
                {
                    "name": "Industry 4",
                    "type": "industry",
                    "percent": 0.16,
                    "count": 175
                },
                {
                    "name": "Industry 5",
                    "type": "industry",
                    "percent": 0.25,
                    "count": 21
                },
                {
                    "name": "Size A",
                    "type": "size",
                    "percent": 0.24,
                    "count": 21
                },
                {
                    "name": "Size B",
                    "type": "size",
                    "percent": 0.15,
                    "count": 49
                },
                {
                    "name": "Size C",
                    "type": "size",
                    "percent": 0.15,
                    "count": 83
                },
                {
                    "name": "Size D",
                    "type": "size",
                    "percent": 0.17,
                    "count": 128
                },
                {
                    "name": "Size E",
                    "type": "size",
                    "percent": 0.13,
                    "count": 241
                },
                {
                    "name": "Size F",
                    "type": "size",
                    "percent": 0.08,
                    "count": 161
                }            ]
        },
        {
            "type": "product",
            "name": "Product 2",
            "links": [
                {
                    "name": "Industry 1",
                    "type": "industry",
                    "percent": 0.06,
                    "count": 15
                },
                {
                    "name": "Industry 3",
                    "type": "industry",
                    "percent": 0.21,
                    "count": 52
                },
                {
                    "name": "Industry 5",
                    "type": "industry",
                    "percent": 0.15,
                    "count": 39
                },
                {
                    "name": "Size C",
                    "type": "size",
                    "percent": 0.28,
                    "count": 78
                },
                {
                    "name": "Size D",
                    "type": "size",
                    "percent": 0.13,
                    "count": 73
                }
            ]
        },
        {
            "type": "product",
            "name": "Product 3",
            "links": [
                {
                    "name": "Industry 4",
                    "type": "industry",
                    "percent": 0.18,
                    "count": 15
                },
                {
                    "name": "Industry 5",
                    "type": "industry",
                    "percent": 0.19,
                    "count": 52
                },
                {
                    "name": "Size A",
                    "type": "size",
                    "percent": 0.15,
                    "count": 3
                },
                {
                    "name": "Size D",
                    "type": "size",
                    "percent": 0.18,
                    "count": 55
                },
                {
                    "name": "Size E",
                    "type": "size",
                    "percent": 0.14,
                    "count": 47
                },
                {
                    "name": "Size F",
                    "type": "size",
                    "percent": 0.13,
                    "count": 24
                }
            ]
        },
        {
            "type": "product",
            "name": "Product 4",
            "links": [
                {
                    "name": "Industry 2",
                    "type": "industry",
                    "percent": 0.1,
                    "count": null
                },
                {
                    "name": "Industry 3",
                    "type": "industry",
                    "percent": 0.01,
                    "count": null
                },
                {
                    "name": "Size A",
                    "type": "size",
                    "percent": 0.21,
                    "count": null
                },
                {
                    "name": "Size B",
                    "type": "size",
                    "percent": 0.11,
                    "count": null
                },
                {
                    "name": "Size C",
                    "type": "size",
                    "percent": 0.18,
                    "count": null
                },
                {
                    "name": "Size D",
                    "type": "size",
                    "percent": 0.14,
                    "count": null
                }            
            ]
        },
        {
            "type": "product",
            "name": "Product 5",
            "links": [
                {
                    "name": "Industry 1",
                    "type": "industry",
                    "percent": 0.1,
                    "count": null
                },
                {
                    "name": "Industry 2",
                    "type": "industry",
                    "percent": 0.15,
                    "count": null
                },
                {
                    "name": "Industry 3",
                    "type": "industry",
                    "percent": 0.03,
                    "count": null
                },
                {
                    "name": "Industry 4",
                    "type": "industry",
                    "percent": 0.08,
                    "count": null
                },
                {
                    "name": "Size 2",
                    "type": "size",
                    "percent": 0.08,
                    "count": null
                },
                {
                    "name": "Size 3",
                    "type": "size",
                    "percent": 0.18,
                    "count": null
                },
                {
                    "name": "Size 5",
                    "type": "size",
                    "percent": 0.25,
                    "count": null
                }
            ]
        }
    ],
    "Industry": [
        {
            "type": "industry",
            "name": "Agriculture, Forestry & Fishery"
        },
        {
            "type": "industry",
            "name": "Arts & Entertainment"
        },
        {
            "type": "industry",
            "name": "Construction"
        },
        {
            "type": "industry",
            "name": "Educational Services"
        },
        {
            "type": "industry",
            "name": "Finance & Insurance"
        },
        {
            "type": "industry",
            "name": "Health Care & Social Assistance"
        },
        {
            "type": "industry",
            "name": "Manufacturing"
        },
        {
            "type": "industry",
            "name": "Mining"
        },
        {
            "type": "industry",
            "name": "Professional Services"
        },
        {
            "type": "industry",
            "name": "Public Administration"
        },
        {
            "type": "industry",
            "name": "Real Estate"
        },
        {
            "type": "industry",
            "name": "Retail Trade"
        },
        {
            "type": "industry",
            "name": "Services - Other"
        },
        {
            "type": "industry",
            "name": "Technology & Communication"
        },
        {
            "type": "industry",
            "name": "Transportation & Warehousing"
        },
        {
            "type": "industry",
            "name": "Utilities"
        },
        {
            "type": "industry",
            "name": "Wholesale Trade"
        }
    ],
    "Size": [
        {
            "type": "size",
            "name": "Size A"
        },
        {
            "type": "size",
            "name": "Size B"
        },
        {
            "type": "size",
            "name": "Size C"
        },
        {
            "type": "size",
            "name": "Size D"
        },
        {
            "type": "size",
            "name": "Size E"
        },
        {
            "type": "size",
            "name": "Size F"
        },
        {
            "type": "size",
            "name": "Size G"
        },
        {
            "type": "size",
            "name": "Size H"
        }
    ]
};

我的想法是，我可以将每个产品类型下的“链接”与匹配的尺寸或行业类型进行匹配。

我的 javascript 在这里：

var width = 600,
    height = 600,
    margin = {top: 16, right: 16, bottom: 16, left: 16},
    radius = 10, 
    gap = 24;

var dProduct = data.Product;

// test layout
var nodes = [];
var links = [];
dProduct.forEach(function(d, i) {
    d.x = width/2;
    d.y = margin.top + gap*i;
    nodes.push(d);
    d.links.forEach(function(c, i) {
        if(c.type === 'industry'){
            c.x = margin.left;
            c.y = margin.top + gap * (i+1) -2*radius;
        }else if (c.type === 'size'){
            c.x = width-margin.right-radius*2;
            c.y = margin.top + gap * (i+1) -2*radius;
        }
        nodes.push(c);

        var a = {x:c.y, y:c.x};
        var b = {x:d.y, y:d.x};
        links.push({source: b, target: a});
    });
});

var color = d3.scale.category20();

var svg = d3.select("#chart").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g");
var diagonal = d3.svg.diagonal()
        .projection(function(d) { return [d.y, d.x]; });

var link = svg.selectAll(".link")
        .data(links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);

var circle = svg.selectAll(".circle")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class", "circle");

var el = circle.append("circle")
        .attr("cx", function(d) {return d.x})
        .attr("cy", function(d) {return d.y})
        .attr("r", radius)
        .style("fill", function(d) {return color(d.name)})
        .append("title").text(function(d) {return d.name});

我认为主要问题是我实际上是从链接创建 Size 和 Industry 节点，而不是创建完整的节点集然后链接它们。

如何布局 3 种类型（行业、产品、尺寸），然后创建产品与其他两种类型之间的链接？或者更准确地说，在我布局了 3 种类型之后，如何创建链接？

谢谢！

【问题讨论】：

找到任何解决方案了吗？如果你能分享会很高兴。
对不起@Fr0zenFyr，我没有解决这个问题。我可能会在几个月后回到它，并会再试一次。
感谢您的回复。我也在研究你的问题中几乎完全一样的东西。如果我在您之前找到解决方案，我会发布答案。

标签： d3.js relationship

【解决方案1】：

如果我理解正确并且您说您的问题是您获得了多个节点副本，那么通过确保仅将节点添加到 nodes 数组一次，这应该很容易解决。确保唯一性的一种方法是使用关联数组，例如 d3.map：

var nodeMap = d3.map();
var links = [];
dProduct.forEach(function(d, i) {
    d.x = width/2;
    d.y = margin.top + gap*i;
    nodeMap.set(d.name, d);
    d.links.forEach(function(c, i) {
        if(c.type === 'industry'){
            c.x = margin.left;
            c.y = margin.top + gap * (i+1) -2*radius;
        }else if (c.type === 'size'){
            c.x = width-margin.right-radius*2;
            c.y = margin.top + gap * (i+1) -2*radius;
        }
        nodeMap.set(c.name, c);

        var a = {x:c.y, y:c.x};
        var b = {x:d.y, y:d.x};
        links.push({source: b, target: a});
    });
});

var nodes = nodeMap.values();

请注意，与您所拥有的代码相比，此代码的唯一更改是在循环中使用 nodeMap 而不是 nodes，然后在最后调用 nodeMap.values()。

在此之后，nodes 应该是一个唯一节点数组，您可以使用它们来创建圈子，links 应该仍然包含与之前相同的所有信息，以将所有内容链接起来。

【讨论】：

谢谢斯科特！昨晚花了一些时间阅读后，我认为答案可能涉及 .map()，但不确定如何。我昨晚实际上修改了我的数据集，这样我就有了节点和链接，并且每个节点都有一个唯一的 id，每个链接都有一个源和目标键。但是使用您的示例和旧数据，您的示例消除了重复的节点，但它的路径无处可去：jsfiddle.net/gdTae/1 越来越近了！