删除条形图上的 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> 个元素具有 class domain:

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

如果其他元素是 domain class 的一部分，您可以通过这样做在 domain 中挑出 <path> 元素：

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

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

Answer 2

在CSS中，您可以简单地添加：

.domain{
    display: none;
}

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

如果您不知道该怎么做，请查看此 link：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对你将来会有好处。

删除条形图上的 X 轴

remove the X axis on a bar chart

html

javascript

css

bar-chart

dc.js