[英]Legend in force-directed graph
我有一個力導向圖,它可以捕獲一些php生成的json並顯示出來。 可以在這里看到: http : //www.testbed.medievalgeek.com/test_forcedirect.php 。
我想在圖上添加圖例,並嘗試通過在此處修改示例的尾部位來做到這一點: 如何在Apex中向D3力導向圖添加動態圖例?
我的整體JavaScript在這里:
function nearest(value, min, max, steps) {
var zerone = Math.round((value - min) * steps / (max - min)) / steps; // bring to 0-1 range
return zerone * (max - min) + min;
}
var clientHeight = document.getElementById('dropdown').clientHeight;
var width = window.innerWidth - 10,
height = window.innerHeight - clientHeight;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "black");
var force = d3.layout.force()
.gravity(0.8)
.distance(100)
.size([width, height]);
var index = -1;
force.charge(function (d) {return d.weight * -250;});
d3.json(<?php echo "\"" . $url_string . "\""?>, function(error, json) {
if (error) throw error;
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link")
.attr('stroke', function(d) {return d.color; })
.attr('stroke-width', 1)
.on("mouseover", function(d) {
d3.select(this).attr('stroke-width', 2);
})
.on("mouseout", function(d) {
d3.select(this).attr('stroke-width',1);
});
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", function (d) {return nearest((Math.log(d.weight) *10), 1, 50, 10) || 10;})
.style('fill', function(d) { return d.color; })
.on("mouseover", function(d) {
link.style('stroke-width', function(l) {
if (d === l.target || d === l.source)
return 2;
})
link.style('stroke', function(l) {
if (d === l.target || d === l.source)
return 'aqua';
})
.duration(150);
})
.on("mouseout", function(d) {
link.style('stroke-width', 1)
link.style('stroke', function(d) {return d.color; })
.duration(150);
});
node.append("text")
.attr("dx", function(d) {return (nearest((Math.log(d.weight) *10), 1, 50, 10) + 5);})
.attr("dy", ".35em")
.text(function(d) {return d.name})
.style('fill', 'lightcyan');
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("circle")
.attr("r", 10)
.style("fill", function(d) { return d.color; });
legend.append("text")
.attr("dx", 10)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d.name; });
.style('fill', 'lightcyan');
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
});
但是,這導致空白屏幕。 如果我嘗試通過更改圖例文本來更緊密地復制示例:
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
出現節點,但是它們不再根據重量分配自己,而是僅出現在左上角。 似乎也沒有傳說。
布置圖例並使力導向方面仍然有效的最佳方法是什么? 大多數示例似乎與我已經擁有的不兼容。
這實際上非常簡單,我很愚蠢地問這個問題。 但是如果其他人想知道,您要做的就是繪制每個項目。 以下代碼可以作為某人入門的基礎。 d.type和d.color是從json傳入的值,分別表示項目和圖形表示的顏色。
var listTypes = d3.set(json.nodes.map(function(d){return d.type})).values();
listColors = [];
listPositions = [];
lineWidths = [];
for(l = 0; l < listTypes.length; l++){
for (var key in json.nodes){
if (listTypes[l] === json.nodes[key].type) {
if (listColors.indexOf(json.nodes[key].color) > -1)
{}
else
{
lineWidths.push(json.nodes[key].type.length);
listColors.push(json.nodes[key].color);
var xlegend = (Math.floor(l / 10) * 100 );
var ycounter;
var ylegend;
var oldxlegend;
if (l===0) {
ycounter = 1;
}
if (ycounter < 10) {
listPositions.push(ycounter * 20);
ycounter++;
}
else
{
listPositions.push(ycounter * 20);
ycounter = 1;
}
}
}
else {}
}
}
console.log(listTypes);
console.log(listColors);
console.log(listPositions);
svg.append("rect")
.attr("class", "overlay")
.attr("x",5)
.attr("y", 10)
.attr("width", Math.max.apply(Math,lineWidths) * 10.6)
.attr("height", listTypes.length * 21.667)
.style ("fill", "aliceblue")
var legend = svg.selectAll(".legend")
.data(listTypes)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(" + (Math.floor(i / 10) * 105) + ", " + listPositions[i] + ")"; })
legend.append("rect")
.attr("x", 10)
.attr("width", 15)
.attr("height", 15)
.attr("fill", function(d,i) {return listColors[i];});
legend.append("text")
.attr("x", 30 )
.attr("y", 6)
.attr("dy", ".35em")
.text(function(d,i){ return titleCase(listTypes[i].replace(/_/g, " "))});
svg.append("g")
.attr("class", "legend")
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.