删除条形图上的 X 轴答案

【问题标题】：remove the X axis on a bar chart删除条形图上的 X 轴
【发布时间】：2016-08-04 18:12:09
【问题描述】：

所以我试图制作一个只有标签而没有 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 来做到这一点？

【问题讨论】：

答案中是否允许使用 Jquery？
y 轴也是domain 类的吗？
是的 Jquery 是允许的，是的，但是我已经通过使左边距 -1 删除了 Y 轴，我可以对我的 x 轴做同样的事情，但我想保留标签在 x 轴上生成。
虽然您可能看不到 y 轴，但标签仍然存在。 y 轴的 <path> 标记是否与 x 轴相同，称为 domain？也许您可以向我们展示轴的整个标记。
是的，x 轴和 y 轴都称为域。

标签： javascript html css bar-chart dc.js

【解决方案1】：

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

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

如果其他元素是 domain 类的一部分，您可以通过执行以下操作在 domain 中挑选出 <path> 元素：

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

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

【讨论】：

酷，谢谢！起初它不起作用，但是当我在显示图表后立即添加$('.domain').css("display","none"); 时，它起作用了。
这可能意味着条形图有它自己的功能，有点像 jQ 与之竞争的.ready()（在最后一个方面输给了）。

【解决方案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 对你将来会有好处。

【讨论】：