个人中心
gpt4 book ai didi

javascript - 当我使用 D3 将鼠标悬停在第二个 SVG 的元素上时如何更改 SVG 中元素的属性

转载 作者：行者123 更新时间：2023-11-30 16:39:07 24 4
gpt4 key购买 nike

我有两个 SVG，我想在 mouseover 另一个 SVG 的元素时更改一个 SVG 的元素的属性。目前，我正在努力选择适当的元素(在代码下面有更详细的解释)。这是它的 jsfiddle:jsfiddle这是完整的代码:

<!DOCTYPE html>
<html>
  <head>
      <title>two svgs</title>
    <style>
        .sweepline{
            stroke:blue;
            stroke-width:3;
        }
        #tooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
        }

        #tooltip.hidden {
                display: none;
        }

        #tooltip p {
                margin: 0;
                font-family: sans-serif;
                font-size: 16px;
                line-height: 20px;
        }
    </style>
  </head>
  <body>
      <div id = 'lines'></div>
      <div id = 'chart'></div>
      <div id="tooltip" class="hidden">
        <p><strong>Name of line</strong></p>
        <p>that work's: <span id="nameLine">100</span></p>
      </div>
      <script src="http://d3js.org/d3.v3.min.js"></script>
      <script>
        var width = 200
        var height = 200
        //names of the lines
        var names = ['aaa', 'bbb', 'ccc']
        //coordinates of the lines
        var x1Val = [5,10,25]
        var x2Val = [50,40,90]
        var y1Val = [5,25,150]
        var y2Val = [5,100,150]
        //create SVG
        var mySvg = d3.select("#lines").append("svg")
                                     .attr("width", width)
                                     .attr("height", height);
        //add all the lines to the svg
        for (i=0; i < x1Val.length; i++){
            mySvg.append("line")
                             .attr("x1", x1Val[i])
                             .attr("y1", y1Val[i])
                             .attr("x2", x2Val[i])
                             .attr("y2", y2Val[i])
                             .attr("id", names[i])
                             .attr("class","sweepline")
                             //when 'touched', change color of line and add tooltip with name of line
                             .on("mouseover", function(d) {
                                d3.select(this).attr("class","sweepline").style("stroke", "red");
                                var xPosition = parseFloat(d3.select(this).attr("x1")) + 100;
                                var yPosition = parseFloat(d3.select(this).attr("y1")) + 50;

                                //Update the tooltip position and value
                                d3.select("#tooltip")
                                  .style("left", xPosition + "px")
                                  .style("top", yPosition + "px")
                                  .select("#nameLine")
                                  .text(d3.select(this).attr("id"));

                                //Show the tooltip
                                d3.select("#tooltip").classed("hidden", false);
                              })
                            //change the color back and hide tooltip     
                             .on("mouseout", function() {

                                d3.select(this).attr("class","sweepline").style("stroke", "blue");
                                d3.select("#tooltip").classed("hidden", true);
                             })
        }
        //create second tooltip
        var mySvg2 = d3.select("#chart").append("svg")
                                     .attr("width", width)
                                     .attr("height", height);
        mySvg2.append('circle')
                .attr("cx", 30)
                .attr("cy", 30)
                .attr("r", 20)
                .on("mouseover", function(d) {
                    d3.select(this).style("fill", "blue");
                    //d3.select('#lines').select(whatGoesInHere?).attr("class", "sweepline").style("stroke", "red");
                });

      </script>   
  </body>
</html>

因此，首先我创建了一个名为 mySvg 的 SVG，并使用 x1Val、x2Val、y1Val< 中提供的一些坐标添加线条 和 y2Val。此 SVG 进入名为 lines 的 div。对于每一行，还有一个 tooltip，它在我 mouseover 时显示行的名称。一切正常。

然后我创建了第二个名为 mySvg2 的 SVG，它只包含一个圆并进入名为 chart 的 div。当我 mouseover 这个圆圈时，我想将 mySvg 中的线条颜色更改为红色，但是，我无法正确选择这些线条。我尝试了几个版本:

d3.select('#lines').select(whatGoesInHere?).attr("class", "sweepline").style("stroke", "red");

但我所有的方法都失败了。

我的问题是:当我mouseover 中的圆圈时，如何修改我的代码以更改mySvg 中一行或所有行的颜色>mySvg2?

最佳答案

只需选择 #lines 中的行元素:

d3.select('#lines').selectAll("line").attr("class", "sweepline").style("stroke", "red");

我已经更新了你的JSFiddle .

关于javascript - 当我使用 D3 将鼠标悬停在第二个 SVG 的元素上时如何更改 SVG 中元素的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32272341/

24 4 0
文章推荐： javascript - 将 javascript window.onerror 限制为仅在我的脚本中出现错误
文章推荐： c - 警告 : passing argument 2 of 'calcFx' makes integer from pointer without a cast
文章推荐： c - 通信节点之间的 Nanomsg 消息加密
文章推荐： c - 为什么值超出了数组的索引？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com