Question

我试图用一个圆形环绕鼠标点，就像十字准线一样，让这个圆圈跟踪鼠标的运动。到目前为止，我所采用的最佳策略是使用D3 enter-update-exit：

在数据支持的鼠标点上添加圆圈。
在鼠标移动时向数据数组添加另一个圆圈，数据=新鼠标点。
如果数据数组超过1，则将第一个值移出（）。
更新可视化。

jsfiddle here - http://jsfiddle.net/hiwilson1/kur2bbv9/1/ - 尽管我认为这在很大程度上是无关紧要的，因为这种策略存在根本性的缺陷。圆圈看起来好像落后于光标并且闪烁。很多。我不想要的。

这里代码的关键部分：

function onMove() {

    var m = d3.mouse(this);
    var point = {x: m[0], y: m[1]};

    area.push(point)

    document.getElementById("svg").onmousedown = function() {
        mouseDown++;
        addNode(m);
    };
    document.getElementById("svg").onmouseup = function() {
        mouseDown--;
    };
    if (mouseDown > 0) {
        addNode(m);
    }

    //if theres two circles, remove the first leaving just the second.
    if (area.length > 1) {
        area.shift();
    }   
    var crosshair = svg.selectAll(".area")
        .data([area])

    crosshair
        .attr("class", "area")
        .attr("cx", m[0])
        .attr("cy", m[1])
        .attr("fill", "none")
        .attr("stroke", "grey")
        .attr("stroke-width", "3px")
        .attr("r", 30)  

    crosshair.enter()
        .append("circle")
            .attr("class", "area")
            .attr("cx", m[0])
            .attr("cy", m[1])
            .attr("fill", "none")
            .attr("stroke", "grey")
            .attr("stroke-width", "3px")
            .attr("r", 30)  

    crosshair.exit().remove()
};

还有另一种方法可以实现吗？很高兴接受非D3策略。

Answer 1

我无法让你的JSfiddle显示任何东西，所以我不确定我是否完全忽略了这一点，但你可以在你的SVG元素之上使用a custom CSS cursor吗？看来.cur cursor files have the most wide-spread support。这将是自定义黑客的本机替代方案（从而提供更好的性能），并且它也会在不受支持的浏览器上优雅地降级。

D3：环绕鼠标点“十字准线”

1 个答案: