javascript - 增加移动用户的点击半径？

Question

我开发了一个关于流行病的游戏和交互式学习工具。它是使用 D3js 的强制导向图形布局实现的。

在开发过程中，我并没有计划得到移动用户的太多热情。事后看来，这是一个明显的误判。

有没有办法增加移动用户“可接受点击”的范围？还是在检测到用户在移动平台上之后，我是否坚持增加节点大小？

示例：http: //vax.herokuapp.com

Answer 1

您可以将节点放入更大的透明圆圈中，这些圆圈会对点击/点击做出反应。如果您将两个圆圈放入同一个g元素并将数据绑定到该元素，那么额外的代码将是最少的。

var gs = d3.selectAll("g").data(data).enter();
gs.append("circle").attr("cx", ...).attr("r", 5);
gs.append("circle").attr("cx", ...).attr("r", 40).attr("opacity", 0)
  .on("click", function() { ... });

Answer 2

您应该使您的绘图响应移动布局。一个简单的方法是调整 viewbox 大小：

使 d3.js 可视化布局响应的最佳方法是什么？