d3.js：链接相关项目
我正在尝试使用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种类型后如何创建链接？
谢谢！
1 个答案:
答案 0 :(得分：0)
如果我理解正确并且你说你的问题是你获得了多个节点副本，那么通过确保节点只被添加到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仍应包含与之前相关的所有相同信息。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？