几个星期以来，我一直在尝试解决这个图形问题......对于 D3.js 来说还是很新的东西，所以看起来很简单的事情仍然让我难以理解。
这是我正在尝试做的一个说明：
目标：
我想显示行业节点/尺寸节点和产品节点之间的关系。
当我悬停产品节点时，我想突出显示每个相关关系的链接、来源（行业或规模）和目标（产品）。
当我悬停行业或规模节点时，我想突出显示它与所有相关产品的链接。
问题
如何绘制链接？我知道它以某种方式涉及使用 d3.map ......但无法弄清楚。
如何突出显示节点和链接（目标 2 和 3）？
如果有更好、更有效的方法来获得这种布局和行为，请告诉我——努力学习技巧！
Fiddle从一组简化的数据中呈现基本布局：http: //jsfiddle.net/9hGbD/
数据当前如下所示：
var data = {
"Product": [
{
"type": "product",
"name": "Product 1"
},
{
"type": "product",
"name": "Product 2"
},
{
"type": "product",
"name": "Product 3"
},
{
"type": "product",
"name": "Product 4"
},
{
"type": "product",
"name": "Product 5"
}
],
"Industry": [
{
"type": "industry",
"name": "Industry 1"
},
{
"type": "industry",
"name": "Industry 2"
},
{
"type": "industry",
"name": "Industry 3"
},
{
"type": "industry",
"name": "Industry 4"
},
{
"type": "industry",
"name": "Industry 5"
}
],
"Size": [
{
"type": "size",
"name": "Size 1"
},
{
"type": "size",
"name": "Size 2"
},
{
"type": "size",
"name": "Size 3"
},
{
"type": "size",
"name": "Size 4"
},
{
"type": "size",
"name": "Size 5"
}
],
"links": [
{
"source": "Industry 1",
"target": "Product 1"
},
{
"source": "Industry 3",
"target": "Product 1"
},
{
"source": "Industry 5",
"target": "Product 1"
},
{
"source": "Industry 2",
"target": "Product 2"
},
...etc..
]
};
我正在使用的 javascript如下所示：
function renderRelationshipGraph(){
var width = 800,
boxWidth = 200,
boxHeight = 20,
gap = 4,
margin = {top: 16, right: 16, bottom: 16, left: 16},
height = (data.Product.length * (boxHeight + gap)) + margin.top + margin.bottom;
var pNodes = [];
var iNodes = [];
var sNodes = [];
var links = [];
data.Product.forEach(function(d, i) {
d.x = ((width-margin.left-margin.right)/3)/2 - boxWidth/2;
d.y = margin.top + (boxHeight+ 4)*i;
pNodes.push(d);
});
data.Industry.forEach(function(d, i) {
d.x = 0;
d.y = margin.top + (boxHeight+ 4)*i;
iNodes.push(d);
});
data.Size.forEach(function(d, i) {
d.x = ((width-margin.left-margin.right)/3) - boxWidth;
d.y = margin.top + (boxHeight+ 4)*i;
sNodes.push(d);
});
var svg = d3.select("#graph").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
svg.append("g")
.attr("class", "industries");
svg.append("g")
.attr("class", "products")
.attr("transform", "translate("+ (width-margin.left-margin.right)/3 + ", 0)");
svg.append("g")
.attr("class", "sizes")
.attr("transform", "translate("+ 2*((width-margin.left-margin.right)/3) + ", 0)");
var products = svg.select(".products");
var product = products.selectAll("g")
.data(pNodes)
.enter()
.append("g")
.attr("class", "unit");
product.append("rect")
.attr("x", function(d) {return d.x;})
.attr("y", function(d) {return d.y;})
.attr("width", boxWidth)
.attr("height", boxHeight)
.attr("class", "product")
.attr("rx", 6)
.attr("ry", 6)
.on("mouseover", function() { d3.select(this).classed("active", true); })
.on("mouseout", function() { d3.select(this).classed("active", false); });
product.append("text")
.attr("class", "label")
.attr("x", function(d) {return d.x + 14;})
.attr("y", function(d) {return d.y + 15;})
.text(function(d) {return d.name;});
var industries = svg.select(".industries");
var industry = industries.selectAll("g")
.data(iNodes)
.enter()
.append("g")
.attr("class", "unit");
industry.append("rect")
.attr("x", function(d) {return d.x;})
.attr("y", function(d) {return d.y;})
.attr("width", boxWidth)
.attr("height", boxHeight)
.attr("class", "industry")
.attr("rx", 6)
.attr("ry", 6)
.on("mouseover", function() { d3.select(this).classed("active", true); })
.on("mouseout", function() { d3.select(this).classed("active", false); });
industry.append("text")
.attr("class", "label")
.attr("x", function(d) {return d.x + 14;})
.attr("y", function(d) {return d.y + 15;})
.text(function(d) {return d.name;});
var sizes = svg.select(".sizes");
var size = sizes.selectAll("g")
.data(sNodes)
.enter()
.append("g")
.attr("class", "unit");
size.append("rect")
.attr("x", function(d) {return d.x;})
.attr("y", function(d) {return d.y;})
.attr("width", boxWidth)
.attr("height", boxHeight)
.attr("class", "size")
.attr("rx", 6)
.attr("ry", 6)
.on("mouseover", function() { d3.select(this).classed("active", true); })
.on("mouseout", function() { d3.select(this).classed("active", false); });
size.append("text")
.attr("class", "label")
.attr("x", function(d) {return d.x + 14;})
.attr("y", function(d) {return d.y + 15;})
.text(function(d) {return d.name;});
}
renderRelationshipGraph();
感谢您对此的帮助！