将鼠标悬停在文本上以添加到链接，添加过滤和缩放

Question

我试图将出现在鼠标悬停在每个边缘/链接旁边的文本添加到下面的d3图形中。 我还想添加一个过滤功能，该功能允许用户单击节点，并且仅查看其直接连接。 最后，我想添加一个缩放功能。

我尝试通过.append（“ text”）直接添加到链接（请参见下文），并尝试其他各种文章（例如请参见此处）中的其他内容，但没有成功。 （每当我向链接添加属性以保存下一个链接时，链接本身就会消失）。 有人知道我该怎么办吗？

对于过滤和缩放，我不知道如何开始，因此这里的任何技巧也很不错。

<!DOCTYPE html>
<meta charset="utf-8">
<body> 
<style>
.link {
stroke: #666;
opacity: 0.6;
stroke-width: 1.5px;
}
.node circle {
stroke: #fff;
opacity: 0.6;
stroke-width: 1.5px;
}
text {
font: 7px serif;
opacity: 0.6;
pointer-events: none;
}
</style>

<script src=http://d3js.org/d3.v3.min.js></script>

<script> 
 var links = [ { "source" : "A", "target" : "B" }, { "source" : "A", "target" : "C" }, { "source" : "A", "target" : "D" }, { "source" : "A", "target" : "J" }, { "source" : "B", "target" : "E" }, { "source" : "B", "target" : "F" }, { "source" : "C", "target" : "G" }, { "source" : "C", "target" : "H" }, { "source" : "D", "target" : "I" } ] ; 
 var nodes = {}

// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] ||
(nodes[link.source] = {name: link.source});
link.target = nodes[link.target] ||
(nodes[link.target] = {name: link.target});
link.value = +link.value;
});

var width = 400
height = 250;

var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-500)
.on("tick", tick)
.start();

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");

link.append("text")
  .attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")
.style("font", "normal 12px Arial")
.attr("transform", function(d) {
    return "translate(" +
        ((d.source.y + d.target.y)/2) + "," + 
        ((d.source.x + d.target.x)/2) + ")";
})   
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) {
    console.log(d.target.rule);
     return d.target.rule;
});

var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", click)
.on("dblclick", dblclick)
.call(force.drag);

node.append("circle")
.attr("r", 8)
.style("fill", "#3182bd");

node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.style("fill", "#3182bd")
.text(function(d) { return d.name; });

function tick() {
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 +     ")"; });
}

function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
}

function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}
// action to take on mouse click
function click() {
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 22)
.style("stroke-width", ".5px")
.style("opacity", 1)
.style("fill", "#E34A33")
.style("font", "17.5px serif");
d3.select(this).select("circle").transition()
.duration(750)
.style("fill", "#E34A33")
.attr("r", 16)
}

// action to take on mouse double click
function dblclick() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 6)
.style("fill", "#E34A33");
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 12)
.style("stroke", "none")
.style("fill", "#E34A33")
.style("stroke", "none")
.style("opacity", 0.6)
.style("font", "7px serif");
}

 </script>
 </body>

Answer 1

评论上没有足够的空间。

如果您不想为您添加一个div工具提示，而只是追加文本，我会这样做：

var links = svg.selectAll(".link")
.data(force.links())
.enter();

var link = links.append("line")
.attr("class", "link");

//and for text 

var linkText = links.append('text') //not append to the link directly but the link container
//and so on

正如我已经提到的，您不能将文本附加到形状上，因此必须将其附加到形状所附加到的元素上。

将鼠标悬停在文本上以添加到链接，添加过滤和缩放

问题描述

1 个解决方案

解决方案1
1 2016-01-09 20:31:44

将鼠标悬停在文本上以添加到链接，添加过滤和缩放

问题描述

1 个解决方案

解决方案1 1 2016-01-09 20:31:44

解决方案1
1 2016-01-09 20:31:44