时间戳

首页 > 解决方案 > 如何在 d3 中选择特定的 SVG 并更改其属性？

javascript - 如何在 d3 中选择特定的 SVG 并更改其属性？

问题描述

我在 html 文件中列出了四个 svg。根据各自的颜色，每个都有不同的类别。每个 SVG 都包含一个矩形和一个圆形。

 <body>
    <svg class="green">
      <g class="blue">

        <rect width="500", height= "500", fill="blue"></rect>
        <circle cx="100", cy="100", r ="50"></circle>
      </g>
    </svg>

      <svg class="green">
        <g class="green">
          <rect width="500", height= "500", fill="green"></rect>
          <circle cx="100", cy="100", r ="50"></circle>
        </g>
      </svg>

      <svg class="green">
        <g class="red">
          <rect width="500", height= "500", fill="red"></rect>
          <circle cx="100", cy="100", r ="50"></circle>
        </g>
      </svg>

      <svg class="green">
        <g class="yellow">
          <rect width="500", height= "500", fill="yellow"></rect>
          <circle cx="100", cy="100", r ="50"></circle>
        </g>
      </svg> 
      <script src="app.js"></script>
  </body>
  <script src="app.js"></script>

app.js 文件包含一个代码，每当鼠标触摸矩形时，所有的 SVG 都会消失。一旦结束，矩形就会再次出现。

//app.js

const svg = d3.selectAll("svg")
const rectangles = d3.selectAll("rect")

rectangles
.on("mouseover", function(){
    svg.attr("opacity", 0)
    svg.select(".green").attr("opacity", 1)
})
.on("mouseout", function(){
    svg.attr("opacity", 1)
})

但我想要做的是只有一个矩形消失，鼠标触摸的矩形。我正在尝试使用多个 if 语句和 switch-case，但有更好的方法吗？也许使用 d3.select 但我不能提供一些东西

标签： javascriptd3.jssvg

解决方案

根据您的 HTML 结构，我想这就是您想要实现的目标：

const svg = d3.selectAll("svg");
const rectangles = d3.selectAll("rect");

rectangles
.on("mouseover", function(){
    // "this" is the rectangle element
    // "this.parentNode.parentNode" is the svg that holding it.
    let parentSvg = this.parentNode.parentNode;

    svg.attr("opacity", function () {
      return parentSvg ==  this ? 1 : 0;
    });
})
.on("mouseout", function(){
    svg.attr("opacity", 1)
});
<script src="https://cdn.jsdelivr.net/npm/d3@5.16.0/dist/d3.min.js"></script>
<svg class="green">
      <g class="blue">

        <rect width="500", height= "500", fill="blue"></rect>
        <circle cx="100", cy="100", r ="50"></circle>
      </g>
    </svg>

      <svg class="green">
        <g class="green">
          <rect width="500", height= "500", fill="green"></rect>
          <circle cx="100", cy="100", r ="50"></circle>
        </g>
      </svg>

      <svg class="green">
        <g class="red">
          <rect width="500", height= "500", fill="red"></rect>
          <circle cx="100", cy="100", r ="50"></circle>
        </g>
      </svg>

      <svg class="green">
        <g class="yellow">
          <rect width="500", height= "500", fill="yellow"></rect>
          <circle cx="100", cy="100", r ="50"></circle>
        </g>
      </svg>

推荐阅读