圆周围的节点标题
我在d3js（D3.js how do I arrange nodes of a force layout to be on a circle）中的圆周围创建了一个力布局，现在我想像这样放置标签：
但是现在这就是我得到的： 您也可以在这里查看：https://bl.ocks.org/pierreee1/07eb3b07ba876011419168d60c587090
我该怎么做才能获得想要的结果？我搜索了一些问题，但没有一个解决方案对我有帮助。
这是我的代码：
// width y height
var w = 1350;
var h = 600;
// declarar la fuerza y la union de los nodos por id, ahora sin charge ni centro porque no se van a correr
var fuerza = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d){
return d.id;
}))
;
// insertar los datos y ponerlos en consola
d3.json("actores_v5.json", function(error, data){
if (error) throw error;
//verificar los datos
console.log("Número de Nodos: " + data.nodes.length)
console.log(data.nodes)
console.log("Número de Links: " + data.edges.length)
console.log(data.edges)
//svg en donde dibujar
var svg = d3.selectAll("body")
.append("svg")
.attr('width', w)
.attr('height', h)
;
//circulo invisible para dibujar los nodos
// it's actually two arcs so we can use the getPointAtLength() and getTotalLength() methods
var dim = w/2;
var circle = svg.append("circle")
//.attr("d", "M 40, "+(dim/2+40)+" a "+dim/2+","+dim/2+" 0 1,0 "+dim+",0 a "+dim/2+","+dim/2+" 0 1,0 "+dim*-1+",0")
.attr('cx', w/2)
.attr('cy', h/2)
.attr('r', 250)
.style("fill", "#ffffff")
;
//crea las lineas con un svg y los datos de "edges"
var lineas = svg.append('g')
.selectAll("line")
.data(data.edges)
.enter()
.append("path")
.attr("class", function(d) {
return "link " + d.tipo;
})
;
//crea los nodos de acuerdo a los nombres
var nodos = svg.append("g")
.selectAll("circle")
.data(data.nodes)
.enter()
.append("circle")
.attr('class', function(d){
if (d.categoria == "gobierno"){
return "nodos " + d.categoria;
}
if (d.categoria == "patrimonio"){
return "nodos " + d.categoria;
}
if (d.categoria == "planeacion"){
return "nodos " + d.categoria;
}
if (d.categoria == "ong"){
return "nodos " + d.categoria;
}
if (d.categoria == "gremios"){
return "nodos " + d.categoria;
}
if (d.categoria == "academia"){
return "nodos " + d.categoria;
}
if (d.categoria == "comunidad"){
return "nodos " + d.categoria;
}
if (d.categoria == "privado"){
return "nodos " + d.categoria;
}
if (d.categoria == "medios"){
return "nodos " + d.categoria;
}
if (d.categoria == "otros"){
return "nodos " + d.categoria;
}
})
.on("mouseover", mouseEncima)
.on("mouseout", mouseAfuera)
.attr('r', 5)
;
nodos
.filter(function(d){
return d.categoria == "gobierno"
|| d.categoria == "patrimonio"
|| d.categoria == "planeacion"
|| d.categoria == "ong"
|| d.categoria == "gremios"
|| d.categoria == "academia"
|| d.categoria == "comunidad"
|| d.categoria == "privado"
|| d.categoria == "medios"
|| d.categoria == "otros"
;
})
.style("opacity", 1)
;
//titulos de los nodos
nodos.append("title")
.text(function(d){
return d.id;
})
;
var text = svg.append("g").selectAll("text")
.data(data.nodes)
.attr('class', "text")
.enter().append("text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) {
return d.id;
})
;
//define los nodos y los links de la simulacion
fuerza.nodes(data.nodes);
fuerza.force("link").links(data.edges);
// calcula los espacios de los circulos en el circulo
var circleCoord = function(node, index, num_nodes){
var circumference = circle.node().getTotalLength();
var pointAtLength = function(l){
return circle.node().getPointAtLength(l)};
var sectionLength = (circumference)/num_nodes;
var position = sectionLength*index+sectionLength/2;
return pointAtLength(circumference-position)
}
// define la posicion de los nodos segun el calculo anterior
data.nodes.forEach(function(d, i) {
var coord = circleCoord(d, i, data.nodes.length)
d.fx = coord.x
d.fy = coord.y
});
for (i = 0; i < data.nodes.length; i++) {
var angle = (i / (data.nodes.length / 2)) * Math.PI;
//data.nodes.push({ 'angle': angle });
}
//simulación y actualizacion de la posicion de los nodos en cada "tick"
fuerza.on("tick", function(){
lineas.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});
nodos.attr("cx", function(d){
return d.x = d.fx;
})
.attr('cy', function(d){
return dy = d.fy;
})
;
text.attr("x", function(d){
return dx = d.fx;
})
.attr('y', function(d){
return dy = d.fy;
})
.style("text-anchor", "start")
});
//saber si las conexiones se ven o no
var toggle = 0;
//Create an array logging what is connected to what
var linkedByIndex = {};
for (i = 0; i < data.nodes.length; i++) {
linkedByIndex[i + "," + i] = 1;
};
data.edges.forEach(function (d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
//This function looks up whether a pair are neighbours
function neighboring(a, b) {
return linkedByIndex[a.index + "," + b.index];
}
function mouseEncima() {
if (toggle == 0) {
//Reduce the opacity of all but the neighbouring nodes
d = d3.select(this).node().__data__;
nodos
.transition()
.style("opacity", function (o) {
return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
})
.attr('r', function(o){
return neighboring(d, o) | neighboring(o, d) ? 10 : 5;
})
;
lineas
.transition()
.style("stroke-opacity", function (o) {
return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
})
;
// text
// .transition()
// .style("opacity", function (o) {
// return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
// })
// ;
//Reduce the opacity
toggle = 1;
}
}
function mouseAfuera() {
nodos
.filter(function(d){
return d.categoria == "gobierno"
|| d.categoria == "patrimonio"
|| d.categoria == "planeacion"
|| d.categoria == "ong"
|| d.categoria == "gremios"
|| d.categoria == "academia"
|| d.categoria == "comunidad"
|| d.categoria == "privado"
|| d.categoria == "medios"
|| d.categoria == "otros"
;
})
.transition()
.style("opacity", 1)
.attr('r', 5)
;
// y las lineas a 0
lineas
.transition()
.style("stroke-opacity", 0.1)
;
// text
// .transition()
// .style("opacity", 0.1)
// ;
toggle = 0;
}
});
1 个答案:
答案 0 :(得分：1)
文本位于大圆的外面，因此我们可以读取第一个字符（textPosition()）。
根据文本相对于圆心的位置/角度，您必须旋转文本，更改文本锚（start，end）和较小的基线偏移量（{{1 }}），使文本相对于彩色圆圈垂直居中。
对于透明性，您不需要dy变量，因为toggle事件仅对每个圆调用一次。
消除了添加圈子类的冗余，它与mouseover相同。
在d.categoria调用中对d.categoria进行大或比较的目的是什么？是否定义了filter()，这是测试吗？
d.categoria修改
看看完整的小提琴。
建议更改链接路径。一些路径沿着圆的圆周。以下内容可防止出现这种情况，并确保所有路径都从中心方向开始。
// width y height
var w = 1350;
var h = 800;
var RAD2DEG = 180.0/Math.PI;
var gCircleRadius = 250;
var gSmallCircleRadius = 5;
// declarar la fuerza y la union de los nodos por id, ahora sin charge ni centro porque no se van a correr
var fuerza = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d){
return d.id;
}))
;
// insertar los datos y ponerlos en consola
d3.json("actores_v5.json", function(error, data){
if (error) throw error;
//verificar los datos
console.log("Número de Nodos: " + data.nodes.length)
console.log(data.nodes)
console.log("Número de Links: " + data.edges.length)
console.log(data.edges)
//svg en donde dibujar
var svg = d3.selectAll("body")
.append("svg")
.attr('width', w)
.attr('height', h)
;
//circulo invisible para dibujar los nodos
// it's actually two arcs so we can use the getPointAtLength() and getTotalLength() methods
var dim = w/2;
var circle = svg.append("circle")
.attr('cx', w/2)
.attr('cy', h/2)
.attr('r', gCircleRadius)
.style("fill", "#ffffff");
//crea las lineas con un svg y los datos de "edges"
var lineas = svg.append('g')
.attr('class', "links")
.selectAll("line")
.data(data.edges)
.enter()
.append("path")
.attr("class", function(d) {
return "link " + d.tipo;
});
//crea los nodos de acuerdo a los nombres
var nodos = svg.append("g")
.attr('class', "nodes")
.selectAll("circle")
.data(data.nodes)
.enter()
.append("circle")
.attr('class', function (d) { return "nodos" + (d.categoria ? " " + d.categoria: ""); })
.on("mouseover", mouseEncima)
.on("mouseout", mouseAfuera)
.attr('r', gSmallCircleRadius);
nodos
.filter(function(d){
return d.categoria == "gobierno"
|| d.categoria == "patrimonio"
|| d.categoria == "planeacion"
|| d.categoria == "ong"
|| d.categoria == "gremios"
|| d.categoria == "academia"
|| d.categoria == "comunidad"
|| d.categoria == "privado"
|| d.categoria == "medios"
|| d.categoria == "otros"
;
})
.style("opacity", 1)
;
//titulos de los nodos
nodos.append("title")
.text(function(d) { return d.id; });
var text = svg.append("g")
.attr('class', "text")
.selectAll("text")
.data(data.nodes)
.enter()
.append("text")
.text(function(d) { return d.id; });
//define los nodos y los links de la simulacion
fuerza.nodes(data.nodes);
fuerza.force("link").links(data.edges);
// calcula los espacios de los circulos en el circulo
var circleCoord = function(node, index, num_nodes){
var circumference = circle.node().getTotalLength();
var pointAtLength = function(l){
return circle.node().getPointAtLength(l)};
var sectionLength = (circumference)/num_nodes;
var position = sectionLength*(index+0.5);
return pointAtLength(circumference-position)
};
// define la posicion de los nodos segun el calculo anterior
data.nodes.forEach(function(d, i) {
var coord = circleCoord(d, i, data.nodes.length)
d.fx = coord.x
d.fy = coord.y
});
var radiusScale = (gCircleRadius+1.5*gSmallCircleRadius) / gCircleRadius;
var textPosition = d => {
var circX = w*0.5, circY = h*0.5;
var dX = (d.fx - circX)*radiusScale, dY = (d.fy - circY)*radiusScale;
return { x: circX + dX, y: circY + dY};
};
//simulación y actualizacion de la posicion de los nodos en cada "tick"
fuerza.on("tick", function(){
lineas.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});
nodos.attr('cx', function(d) { return d.x = d.fx; })
.attr('cy', function(d) { return d.y = d.fy; });
text.each( (d, i, nodes) => {
var textPos = textPosition(d);
var angle = Math.atan2(textPos.y-h*0.5, textPos.x-w*0.5)*RAD2DEG;
d3.select(nodes[i])
.attr('x', textPos.x)
.attr('y', textPos.y)
.attr('dy', (angle>90 || angle<-90) ? "0.3em" : "0.4em")
.style("text-anchor", (angle>90 || angle<-90) ? "end" : "start")
.attr("transform", `rotate(${ (angle>90 || angle<-90) ? angle+180 : angle}, ${textPos.x}, ${textPos.y})` );
});
});
//Create an array logging what is connected to what
var linkedByIndex = {};
for (i = 0; i < data.nodes.length; i++) {
linkedByIndex[i + "," + i] = 1;
};
data.edges.forEach(function (d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
//This function looks up whether a pair are neighbours
function neighboring(a, b) {
return linkedByIndex[a.index + "," + b.index];
}
function mouseEncima() {
//Reduce the opacity of all but the neighbouring nodes
d = d3.select(this).node().__data__;
nodos
.transition()
.style("opacity", function (o) {
return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
})
.attr('r', function(o){
return neighboring(d, o) | neighboring(o, d) ? 2*gSmallCircleRadius : gSmallCircleRadius;
})
;
lineas
.transition()
.style("stroke-opacity", function (o) {
return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
})
;
}
function mouseAfuera() {
nodos
.filter(function(d){
return d.categoria == "gobierno"
|| d.categoria == "patrimonio"
|| d.categoria == "planeacion"
|| d.categoria == "ong"
|| d.categoria == "gremios"
|| d.categoria == "academia"
|| d.categoria == "comunidad"
|| d.categoria == "privado"
|| d.categoria == "medios"
|| d.categoria == "otros"
;
})
.transition()
.style("opacity", 1)
.attr('r', 5)
;
// y las lineas a 0
lineas
.transition()
.style("stroke-opacity", 0.1)
;
}
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？