javascript - d3 鼠标移动十字线边界-6ren

javascript - d3 鼠标移动十字线边界

转载作者：行者123 更新时间：2023-11-30 12:41:45

28

4

[更新]

点击jsfiddle在这里。

[原帖]

如何限制鼠标移动时十字线的坐标？请注意，当我将鼠标移到 x 轴左侧或 y 轴底部时，十字线和文本仍然显示。当鼠标移到 x 轴左侧或 y 轴底部时，我希望十字线和文本停止显示。

我尝试添加 if else限制十字线，但没有用。例如，我尝试了类似 .style("display", (xCoord>=minX & xCoord<=maxX & yCoord>=minY & yCoord<=maxY) ? "block" : "none") 的东西在addCrossHair()功能。

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <style>
        .axis path,
        .axis line
        {
            fill:none;
            rendering:crispEdges;
            stroke:black;
            width:2.5;
        }
    </style>
</head>
<body>
    <script src="d3.min.js"></script>
    <script>
        var width = 800,
            height = 600;

        var randomX = [],
            randomY = [];
        for (var i = 0; i <= 500; i++) {
            randomX[i] = Math.random() * 400;
            randomY[i] = Math.random() * 400;
        }

        var minX = d3.min(randomX),
            maxX = d3.max(randomX),
            minY = d3.min(randomY),
            maxY = d3.max(randomY);

        var xScale = d3.scale.linear().domain([minX, maxX]).range([0, width]);
        var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
        var yScale = d3.scale.linear().domain([minY, maxY]).range([height, 0]);
        var yAxis = d3.svg.axis().scale(yScale).orient("left");

        var svgContainer = d3.select("body").append("div").append("svg").attr("width", width).attr("height", height);
        var svg = svgContainer.append("g").attr("transform", "translate(50, 50)");

        svg.append("g").attr("class", "axis").attr("transform", "translate(0,530)").call(xAxis);
        svg.append("g").attr("class", "axis").call(yAxis);

        var crossHair = svg.append("g").attr("class", "crosshair");
        crossHair.append("line").attr("id", "h_crosshair") // horizontal cross hair
            .attr("x1", 0)
            .attr("y1", 0)
            .attr("x2", 0)
            .attr("y2", 0)
            .style("stroke", "gray")
            .style("stroke-width", "1px")
            .style("stroke-dasharray", "5,5")
            .style("display", "none");

        crossHair.append("line").attr("id", "v_crosshair") // vertical cross hair
            .attr("x1", 0)
            .attr("y1", 0)
            .attr("x2", 0)
            .attr("y2", 0)
            .style("stroke", "gray")
            .style("stroke-width", "1px")
            .style("stroke-dasharray", "5,5")
            .style("display", "none");

        crossHair.append("text").attr("id", "crosshair_text") // text label for cross hair
            .style("font-size", "10px")
            .style("stroke", "gray")
            .style("stroke-width", "0.5px");

        svgContainer.on("mousemove", function () {
            var xCoord = d3.mouse(this)[0] - 50,
                yCoord = d3.mouse(this)[1] - 50;
                addCrossHair(xCoord, yCoord);
            })
            .on("mouseover", function () {d3.selectAll(".crosshair").style("display", "block");})
            .on("mouseout", function () {d3.selectAll(".crosshair").style("display", "none");});

        function addCrossHair(xCoord, yCoord) {
            // Update horizontal cross hair
            d3.select("#h_crosshair")
                .attr("x1", xScale(minX))
                .attr("y1", yCoord)
                .attr("x2", xScale(maxX))
                .attr("y2", yCoord)
                .style("display", "block");
            // Update vertical cross hair
            d3.select("#v_crosshair")
                .attr("x1", xCoord)
                .attr("y1", yScale(minY))
                .attr("x2", xCoord)
                .attr("y2", yScale(maxY))
                .style("display", "block");
            // Update text label
            d3.select("#crosshair_text")
                .attr("transform", "translate(" + (xCoord + 5) + "," + (yCoord - 5) + ")")
                .text("(" + xScale.invert(xCoord) + " , " + yScale.invert(yCoord) + ")");
        }

        svg.selectAll("scatter-dots")
            .data(randomY)
            .enter().append("svg:circle")
            .attr("cy", function (d) {
                return yScale(d);
            })
            .attr("cx", function (d, i) {
                return xScale(randomX[i]);
            })
            .style("fill", "brown")
            .attr("r", 3)
    </script>
</body>

最佳答案

这样做的方法是使实际的 Canvas (即您绘制点的地方)成为一个单独的 g 元素，与轴渲染到的元素不同。然后可以平移 Canvas ，使其位于轴的右侧和上方。十字准线处理程序将附加到此 Canvas g 元素(这不是很简单，请参阅 this question )并且十字准线或点不会出现在 Canvas 之外。

完整演示 here .

关于javascript - d3 鼠标移动十字线边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24189217/

28

4

0

文章推荐： ios - Firebase 中的嵌套信息

iphone - 边界] 横向时不改变
我编写了一个应用程序，它有一个 UIViewController，它在纵向模式下显示另一个 UIViewController，在横向模式下显示不同的 UIViewController。当我去风景时，
iphone - UISegmentedControl 边界
我想为 UISegmentedControl 提供以下方面: 注意灰色背景 View ，以及分段控件未选定项目的白色背景。但是，如果我为 UISegmentedControl 提供白色背景，我会得到
javascript - 可排序的容器/边界
我正在尝试为我的可排序项目创建边界。我看过这个问题/答案: jquery sortable keep within container Boundary 并尝试将我的 JS 以此为基础，但无论出于何种
Java JFrame 边界
我正在尝试编写执行以下操作的代码:如果我单击起始位置为 (100,100) 的字符串 C(JLabel)，该字符串将在 JFrame 的边界内移动。代码本身并不难实现，但我遇到了问题为 JLabel
应用约束后快速获取 View 边界
我有一个 .xib 文件，其中包含我想用来播放视频文件的 View 。该 View 具有配置其大小和位置的约束。现在我需要获取这些来配置我的视频播放器: let slide1: OnboardingS
swift - MKMapView 边界
我将从 Google map 转到 Apple map 。 Google map 能够根据东北和西南坐标更新相机，如下所示: let bounds = GMSCameraUpdate.fit(GMSC
Android 为我的图片添加圆角线？边界
这个问题在这里已经有了答案: Border over a bitmap with rounded corners in Android (6 个答案) 关闭 6 年前。如何为我的图片添加圆角边框？
Java AWT 边界
我有一个任务是使用java.awt.Graphics绘制一定数量的圆圈。绘制圆圈相当简单，但我只应该在圆圈出现在可见区域内时绘制圆圈。我知道我可以调用方法 getClipBounds() 来确定绘图
html - 过渡方向 - 边界
我在设置过渡时遇到问题，目前它是从上到下(它是悬停时显示的边框)。我希望过渡从中间开始并传播到侧面，或者至少从任何一侧开始并传播到另一侧... 我的导航菜单 anchor 使用导航链接类! * {
C++: vector 边界
我来自 Java，目前正在学习 C++。我正在使用 Stroustrup 的 Progamming Principles and Practice of Using C++。我现在正在使用 vecto
C++循环展开，边界
我有一个要展开的循环: for(int i = 0; i < N; i++) do_stuff_for(i); 展开: for(int i = 0; i < N; i += CHUNK) {
与子类型一起使用的 Scala View 边界？
Scala 中是否有类似 View 绑定(bind)但可以匹配子类型的东西？由于 Scala 中的 View 没有链接，我目前有以下内容: implicit def pimpIterable[A,
javascript - map 边界!如何检查地址是否位于边界内？
网站用户输入地址。如果地址在边界内，则“合格”。如果地址超出边界，则“不合格”。是否有现有的小部件或代码可以执行此操作？有人知道实现这一目标的第一步吗？感谢您的任何意见。最佳答案哇，反对票是怎
haskell - 加密和 ByteString 边界
我有以下测试应用程序: import Codec.Crypto.AES import qualified Data.ByteString.Char8 as B key = B.pack "Thisis
java - JFrame - 设置位置/边界？
我正在尝试添加一个 JButton，但它与进度条水平对齐。如何将 JButton 对齐到下面的线上？另外，我试图将所有组件分组到不同的组中，但我不确定如何执行此操作。有谁知道吗？最佳答案要简单分
python - 查找相框的 Canvas 边界
假设我们有一个像上面这样的相框。从中心开始，如何找到可用于绘制的面积最大的矩形(矩形中的所有像素必须为 rgb(255,255,255)？我需要找到图中所示的A点和B点的x和y坐标。我的方法之一是
c# - 类(class)边界
这可能是一个愚蠢的问题，但当我创建一个类时，我应该如何正确设置其中属性的边界。例子:如果我有这门课 class Product { private string name; publ
javascript - 如何获得 map 边界？
我正在从 leaflet 迁移回来，如果我需要 map 绑定(bind)，我使用以下代码: var b = map.getBounds(); $scope.filtromapa.lat1 = b.ge
ios - UIView 边界/框架与绘制矩形不匹配
我正在学习如何创建自定义 UIView。我正在制作的这个特定 View 包含几个按钮。我注意到，当我从惰性实例化 block 中调用frame/height属性时，我得到的值是128，但是当我调用dr
java - 反转 JFrame 边界
我正在尝试制作一个弹跳球。设置的边界允许球在超出框架边界后从起点开始。我无法让球弹起来。一旦击中边界(框架的外边缘)，如何让球弹起？我相信问题出在 moveBall() 方法中。主类导入 java

首页

博学

6Ren·AI

商城

javascript - d3 鼠标移动十字线边界