时间戳

首页 > 解决方案 > 如何仅使用 css 隐藏 svg 中的某个路径线？

html - 如何仅使用 css 隐藏 svg 中的某个路径线？

问题描述

我有以下使用 d3 js的代码。我需要能够仅使用 CSS 隐藏 45 y 轴顶部的重叠蓝线。该代码当前是由我从后端获取的数据生成的，因此我只需要确保隐藏 svg 类图表内重叠的任何行。

我已经使用了以下 css，但仍然不足以隐藏重叠：

svg:not(:root) {
overflow: visible!important;
    }

div#graphContainer_0 {
overflow: hidden;
    }

标签： htmlcssd3.js

解决方案

您可以清楚地看到，Overflow 行在路径标记的d属性中使用了 5 个值。而其他行在路径标记中具有 4 个d属性的值。

Overflow line

 <path class="line" d="
 M886.9440000000001,
 377.8723404255319L295.648,
 245.10638297872342L0,
 222.6382978723404L-295.648,
 61.27659574468083
 "style="stroke: rgb(0, 173, 242);"></path>

Other lines

 <path class="line" 
 d="M0,
 234.8936170212766L295.648,
 255.31914893617022L886.9440000000001,
 275.74468085106383
 "style="stroke: rgb(186, 187, 193);"></path>

使用相同的值，它将起作用。

 <path class="line" d="
 M886.9440000000001,
 377.8723404255319L295.648,
 245.10638297872342L0,
 222.6382978723404L-295.648
 "style="stroke: rgb(0, 173, 242);"></path>

对不起第一个答案。

推荐阅读