删除条形图上的X轴

Question

所以我试图制作一个仅带有标签的条形图，而没有X轴的物理线。我已经设法通过使左边距为-1来移除y轴，但我想保留为X轴生成的标签。

我已经设法通过检查我的网页并找到x轴对象并将其从<path class="domain" d="M1,6V0H391.5V6" style="domain.height: 0;"></path>更改为<path class="domain" d="M,6V0H391.5V6" style="domain.height: 0;"></path>来删除该行。

我如何使用CSS，HTML或JS？

Answer 1

如果允许使用jquery，并且只有<path>元素具有类domain：

$(document).ready(function () {
    $('.domain').css("display","none");
});

如果其他元素属于domain类，您可以通过以下方式挑出<path>中的domain元素：

$(document).ready(function () {
    $('path.domain').css("display","none");
});

这有效地禁用了y轴和x轴的显示，因此无需将左边距设置为负。

Answer 2

在CSS中，您只需添加：

.domain{
    display: none;
}

将上述规则放在外部CSS文档中，并将标记添加到HTML文档的头部。

如果您不知道如何操作，请查看以下链接：http://www.w3schools.com/tags/tag_link.asp

这是最简单的解决方案，如果出于某种原因需要JavaScript，这里是纯JavaScript的解决方案。

首先，将此规则添加到上面的外部CSS文件中：

.display-none{
    display: none;
}

然后，在你的JS文件中，添加：

var domainPaths = document.querySelectorAll("path.domain");

for(var i=0;i<domainPaths.length;i++){
    domainPaths[i].classList.add("display-none");
}

这将隐藏x轴和y轴。

现在看起来似乎很复杂，但学习纯JS将在未来很好地为你服务。