Question

不要重叠，但链接文字不显示

我在stackoverflow.com上的问题 How to show many links separate by value in D3.js forced directed graph

将来我认为线路可能会重叠，因为线条是半圆形曲线，因此我改变了dr公式。

我搜索如何用另一种方式创建曲线。我看到https://bl.ocks.org/mbostock/4600693。我尝试将其应用于我的数据。查看我的新演示http://bl.ocks.org/Lovekiizzk/ab6fdec08beef4999839

//Appends link 
var link = svg.selectAll(".link")
.data(links)
.enter()
.append("g") // circle
.attr("class", "link")
.append("polyline") //if "line" It not show path
.attr("class", "link-line")
.style("stroke-width", 1)
//.attr("fill", "Black")
//.style("stroke-width", function (d) {  return Math.sqrt(d.value); })
.style("marker-mid",  "url(#end)");

//Appends link text
var linkText = svg.selectAll(".link")
.append("text")
.attr("class", "link-label")
//.attr("font-family", "tahoma, verdana, sans-serif")
.attr("fill", "Black")
.style("font", "normal 10px tahoma")
.attr("dy", ".15em")
.attr("text-anchor", "middle")
.text(function(d) { return d.value; });

现在，Line（链接）不重叠。这非常好。节点上的文本，图像而不是圆圈和链接按箭头方向显示在我的图表中。 但Linktext未显示。

我想通过d.value

显示linktext

 "links":[
{"source":1,"target":3,"prop":"coach","value":"coach"},
{"source":4,"target":2,"prop":"title","value":"title"},
{"source":4,"target":0,"prop":"menCurrent","value":"menCurrent"},
{"source":3,"target":1,"prop":"coachplayers","value":"coachplayers"},
{"source":5,"target":0,"prop":"bronze","value":"bronze"},
{"source":5,"target":1,"prop":"gold","value":"gold"},
{"source":5,"target":1,"prop":"goldMedalist","value":"goldMedalist"},
{"source":5,"target":1,"prop":"TestRelation3","value":"TestRelation3"},
{"source":5,"target":0,"prop":"bronzeMedalist","value":"bronzeMedalist"},
{"source":6,"target":0,"prop":"menCurrent","value":"menCurrent"},
{"source":6,"target":2,"prop":"title","value":"title"},
{"source":7,"target":0,"prop":"caption","value":"caption"},
{"source":7,"target":1,"prop":"caption","value":"caption"},
{"source":3,"target":2,"prop":"coachtournamentrecord","value":"coachtournamentrecord"}
]

但它是Dnot show

请告诉我原因。我的英文很差。希望你不要介意。非常感谢你

Answer 1

您的问题是当您mDelivery.postResponse(request, response);获取所有svg.selectAll元素时，您的选择中不再有任何数据。

试试这个：

.link

D3.js Don不重叠，但链接文字没有显示

不要重叠，但链接文字不显示

1 个答案: