私はこのグラフの問題を数週間解決しようとしています... D3.js はまだかなり新しいので、単純に見えるかもしれないことはまだ私を逃しています。
これが私がやろうとしていることの図です：
目標:
Industry Nodes/Size Nodes と Product Nodes の関係を示したいと思います。
製品ノードにカーソルを合わせると、関連する各関係のリンク、ソース (業界または規模)、およびターゲット (製品) が強調表示されます。
業種または規模のノードにカーソルを合わせると、関連するすべての製品へのリンクが強調表示されます。
質問
リンクを描画するにはどうすればよいですか? どういうわけか 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();
これについて助けてくれてありがとう！