javascript – D3鼠标悬停在节点链接图中的链接,增加“接受”范围

有时我需要在节点链接图中显示具有非常小的笔划宽度(<3px)的边.这使得用户很难将鼠标悬停在它们上面. 我正在使用.on(‘mouseover’,()=> // do stuff)函数.

有没有一种简单的方法可以增加触发鼠标悬停事件的半径?让我们说它应该总是假设边缘的笔画宽度至少为5px.

我正在动态着色边缘,但是可能有一种方法可以将边缘的颜色设置为类似的东西(请参见灰色面板作为边缘,水平放置):

transparent (2px)
color (1px)
transparent (2px)

所以它实际上有5px的大小,但只有1px可见?

或者我是否真的要计算我的边缘是否与我的鼠标手动重叠? (这绝对是可能的,但考虑到一些边缘是弯曲的,而另一些边缘则没有,……这真的很麻烦).

最佳答案

Is there an easy way to increase the radius that would trigger the mouseover event?

不,事件处理程序被添加到元素中,如果窄元素的笔触宽度为3px,则仅当鼠标位于这些像素上时才会运行该函数.

Is there maybe a way to set the color of the edge to something like […] it actually has a size of 5px, but only 1px is visible?

这可以使用路径并将彩色填充与透明笔划相结合.然而,一种更简单的方法是复制选择,具有完全相同的属性,并使顶部路径或线(通过“顶部”我的意思是代码中稍后的选择)透明且具有更大的笔划宽度.

例如,在这个演示中,有20px宽的透明线,通过可见的窄线捕获mousemove事件:

//these lines are painted first
var links = svg.selectAll("foo")
    .data(edges)
    .enter()
    .append("line")
    .style("stroke", "#ccc")
    .style("stroke-width", 1);

//these transparent lines are painted on top, and they capture the mousemove
var linksTransparent = svg.selectAll("foo")
    .data(edges)
    .enter()
    .append("line")
    .style("stroke", "none")
    .attr("pointer-events", "all")
    .style("stroke-width", 20)
    .on("mousemove", d => {
        console.log("source: " + d.source.id + ", target: " + d.target.id)
    });
var width = 400;
var height = 200;

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

var nodes = [{
  "id": "One"
}, {
  "id": "Two"
}, {
  "id": "Three"
}, {
  "id": "Four"
}];

var edges = [{
  "source": 0,
  "target": 1
}, {
  "source": 0,
  "target": 2
}, {
  "source": 0,
  "target": 3
}];

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().distance(60))
  .force("charge", d3.forceManyBody().strength(-200))
  .force("center", d3.forceCenter(width / 2, height / 2));

var links = svg.selectAll("foo")
  .data(edges)
  .enter()
  .append("line")
  .style("stroke", "#ccc")
  .style("stroke-width", 1);

var links2 = svg.selectAll("foo")
  .data(edges)
  .enter()
  .append("line")
  .style("stroke", "none")
  .attr("pointer-events", "all")
  .style("stroke-width", 20)
  .on("mousemove", d => {
    console.log("source: " + d.source.id + ", target: " + d.target.id)
  });

var color = d3.scaleOrdinal(d3.schemeCategory20);

var node = svg.selectAll("foo")
  .data(nodes)
  .enter()
  .append("g")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

var nodeCircle = node.append("circle")
  .attr("r", 10)
  .attr("stroke", "gray")
  .attr("fill", (d, i) => color(i));

var texts = node.append("text")
  .style("fill", "black")
  .attr("dx", 20)
  .attr("dy", 8)
  .text(function(d) {
    return d.id;
  });

simulation.nodes(nodes);
simulation.force("link")
  .links(edges);

simulation.on("tick", function() {
  links.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;
    });

  links2.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", (d) => "translate(" + d.x + "," + d.y + ")")

});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}
<script src="https://d3js.org/d3.v4.min.js"></script>

转载注明原文:javascript – D3鼠标悬停在节点链接图中的链接,增加“接受”范围 - 代码日志