d3js v4:仅在 x 轴上显示标签

2023-12-01

我正在创建一个堆积条形图。我只想在 x 轴上显示刻度线的标签文本,但不显示刻度线和水平 x 轴线。

我该如何离开这里?

g.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(0,' + height + ')')
  .call(d3.axisBottom(x));

这是CSS:

.axis path, .axis line {
  fill: none;
  stroke: none;
}

这是一个演示:

var svg = d3.select("svg");
var x = d3.scaleLinear().domain([1, 10]).range([10, 390])
svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(0,50)')
  .call(d3.axisBottom(x));
.axis path, .axis line {
  fill: none;
  stroke: none;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="400" height="80"></svg>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

d3js v4:仅在 x 轴上显示标签 的相关文章

  • Javascript 将对象推送为克隆

    我将 d3 用于交互式网络应用程序 我需要绑定的数据在交互过程中发生变化 并且由 JSON 变量中的一些选定对象组成 为此 我在 JSON 变量上使用了映射 并进行了一些查询来选择适当的对象 对象被推送到列表中 并且该列表被绑定为新数据 我
  • Dimple.js - 将数据标签添加到条形图的每个条形

    我使用的是dimple js 它基于d3 js 是否可以向本示例中提到的条形图的每个条形添加数据标签http dimplejs org examples viewer html id bars vertical http dimplejs
  • NVD3 - 配置轴上的刻度

    我有一个 nvd3 折线图 它显示时间序列 但无法在 x 轴右侧获取刻度 对于较长的时间跨度 它会按预期工作 但对于较短的时间跨度 此处 12 31 05 至 01 01 06 多个刻度显示相同的日期 请看一下JSFiddle 上此图表的代
  • D3 强制布局,较大的节点聚集在中心

    我一直在修改将用于标签云的强制布局 每个标签都由一个
  • 多个链接 dc.js 图表的 d3-tooltips

    我正在寻找修改 dc js 的开箱即用工具提示 似乎有一个解决方案使用d3 js 工具提示 https github com Caged d3 tip as in 这个问题 https stackoverflow com questions
  • 赋予 d3 序数轴标签与尺度名称不同

    我有一个序数scale具有不同值的某些标签 我想显示该比例的轴 其中轴标签与比例标签不同 我有这个代码 var width 1000 var height 600 var margins left 100 40 right 25 botto
  • LeafletJs只显示一个国家

    我使用 Leafletjs 和 D3 来显示地图 我只想在地图上显示英国 Leaflet和D3是否可以只显示英国 这当然是可能的 现在的解决方案取决于您是想使用 D3 绘制英国 还是想从 Tile Server 获取它 在后一种情况下 有一
  • 如何在 d3 中使用SimulationLinkDatum和SimulationNodeDatum

    我在使用SimulationLinkDatum 类型时遇到问题 我创建了两个类 Node 和 Link 来实现SimulationNodeDatum 和SimulationLinkDatum 当我尝试使用SimulationLinkDatu
  • 设置 D3 力定向图

    致尊敬的读者 我对 javascript 相当陌生 我也遇到过这个问题 我正在尝试实现这个力导向图的修改版本 http mbostock github com d3 ex force html http mbostock github co
  • 如何在 d3.js 中的节点上制作双击事件?

    我想在节点上进行双击事件 所以我尝试了 on dbclick function d return http google com and bind dbclick function d alert hello 但一切都失败了 谁能帮我 完整
  • D3.js 从 file:/// 加载本地数据文件

    我知道D3 js支持使用XHR和JSONP加载数据文件requests https github com mbostock d3 wiki Requests 但就我而言 我将通过从文件系统双击 html 文件来运行它们 这将像file fo
  • D3.js折线图溢出边距

    我有 d3 js 折线图 它作为 angular js 应用程序的指令包含在内 动态添加的线和 xAxis 以及缩放线上的边距溢出 我必须在图的顶部为每条加载的线创建 Ox 轴 并具有 Ox 和 Oy 单独的缩放可能性 Oy 缩放工作正常
  • 需要帮助从数组中为国家/地区着色,保留其余默认颜色

    我需要一些帮助从我创建的数组中获取数据 然后仅对数组中存在的国家 地区进行着色 而不在数组中的其余国家 地区我希望保留为默认颜色 我正在使用 D3 来完成所有这些工作 并且我非常确定我可以通过 D3 实现我需要的目标 但不确定如何实现 我想
  • D3:在一个文件夹中加载多个csv数据文件

    我正在使用 d3 创建可视化 我的数据由同一文件夹中的 80 多个 CSV 文件组成 所以我想知道是否有一种简单的方法可以加载所有这些 我在想也许检查文件夹中有多少文件 然后递归加载它们 不过D3好像不行 任何建议 将不胜感激 谢谢 当你想
  • 改进 D3 序列旭日示例

    This D3示例作为我的出发点 http bl ocks org kerryrodden 7090426 http bl ocks org kerryrodden 7090426 我想更改提供图表的数据 并且我做了以下新示例 http j
  • svg:如何在计算线上设置一个圆?

    我试图用 svg 在计算线上设置一个圆 这是我的例子 http jsfiddle net 7XC9j http jsfiddle net 7XC9j html
  • 将 D3 图表另存为图像

    我在应用程序中创建了很多 D3 图表 但现在我的要求是将 D3 图表保存为任何格式 如 png gif 或 pdf 我搜索了很多 每个人都说我们可以使用画布来实现这一点 任何人都可以给出任何示例或链接吗 从概念上讲我很清楚这一点 使用can
  • D3.js 对力导向图使用什么算法?

    我有兴趣确切地知道 D3 使用什么算法来实现库中的力导向图功能 读过科布罗夫的总结 http www cs brown edu rt gdhandbook chapters force directed pdf力导向图的历史让我有点困惑 不
  • 鼠标悬停时在折线图上画一条线?

    我正在使用 D3 js 构建折线图 当用户将鼠标悬停在图表上时 我想在图表上绘制一条垂直线 突出显示其与图表线的交点 并显示工具提示 如以下屏幕截图所示 我已经在这条路上走了一部分了 这是我在 JSFiddle 上的代码 http jsfi
  • 更改 c3.js 散点图中气泡的大小

    我有一个散点图 我想改变点的大小 使它们看起来像气泡 有人可以告诉我如何改变气泡的大小吗 这是我的代码 var chart c3 generate data xs IBM ibm x Microsoft microsoft x column

随机推荐