Safari 中 D3 功能区路径的悬停问题

Question

我在 Safari 中遇到 D3.js 功能区的问题，其中某些 SVG 路径元素不响应样式更改的悬停事件。悬停效果（例如更改填充样式）在 Chrome 和 Firefox 中完美运行。然而，在 Safari 中，某些路径似乎完全忽略了悬停交互。

我已经尝试了所有可能的指针事件值（全部、自动、visiblePainted 等），但它仍然不起作用。这是我已经验证过的：

• 路径可见并正确渲染。
• 没有重叠的元素阻碍路径。
• 悬停效果通过 D3 的 .on("mouseover", ...) 应用。

这是我实现路径绘制的方法：

// Dimensions and container setup
const width = 600, height = 600;
const svg = d3.select("#circos-plot")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", `translate(${width / 2},${height / 2})`);

// Updated data with new angles
const data = {
    source: { radius: 200, startAngle: 0.10082134423424959, endAngle: 0.23383773956851167 },
    target: { radius: 200, startAngle: 1.0174690537411528, endAngle: 1.0615254394569593 }
};

// Ribbon generator
const ribbon = d3.ribbon().radius(data.source.radius);

// Append ribbon with hover event
svg.append("path")
    .datum(data)
    .attr("d", ribbon)
    .attr("fill", "steelblue")
    .attr("class", "ribbon")  // Add class for hover styling
    .style("pointer-events", "visibleFill")  // Ensure pointer events work
    .on("mouseover", function(event, d) {
      // Change color on hover
      d3.select(this).transition().duration(300).attr("fill", "orange");
    })
    .on("mouseout", function(event) {
      // Reset color when mouse leaves
      d3.select(this).transition().duration(300).attr("fill", "steelblue");
    });

以下是完整的工作示例：

https://codepen.io/joko3ono/pen/VYZPwWa

是否需要任何特定代码或调整才能使 SVG 在 Safari 中正常运行，类似于在其他浏览器中的工作方式？

Answer 1

1。将指针事件更改为全部，以确保其在 Safari 中正常工作。

2。将 z-index 设置为 10 以确保正确的堆叠和指针事件处理。

3.将其替换为 event.target 以确保跨浏览器的一致性。

4。修复了translate()函数中的transform属性语法。

    // Dimensions and container setup
    const width = 600, height = 600;
    const svg = d3.select("#circos-plot")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", `translate(${width / 2},${height / 2})`);

    // Updated data with new angles
    const data = {
        source: { radius: 200, startAngle: 0.10082134423424959, endAngle: 0.23383773956851167 },
        target: { radius: 200, startAngle: 1.0174690537411528, endAngle: 1.0615254394569593 }
    };

    // Ribbon generator
    const ribbon = d3.ribbon().radius(data.source.radius);

    // Append ribbon with hover event
    svg.append("path")
        .datum(data)
        .attr("d", ribbon)
        .attr("fill", "steelblue")
        .attr("class", "ribbon")  // Add class for hover styling
        .style("pointer-events", "all")  // Ensure pointer events work on the path
        .style("z-index", "10")  // Ensure the path is above other elements
        .on("mouseover", function(event, d) {
            d3.select(event.target).transition().duration(300).attr("fill", "orange");
        })
        .on("mouseout", function(event) {
            d3.select(event.target).transition().duration(300).attr("fill", "steelblue");
        });

/* Ensure the container takes up the full viewport */
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        #circos-plot {
            border: 1px solid #ccc;
        }

        /* You can adjust the ribbon hover styles here */
        .ribbon:hover {
            transition: fill 0.3s ease;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
<svg id="circos-plot" width="600" height="600"></svg>