是否有一个有效的实现可以在一页上显示多个 d3 图表(例如折线图、条形图等)? [关闭]

2023-12-28

我正在尝试在单个 jsp 页面上放置多个图表。 我有折线图和条形图的组合。我正在为 d3.js 使用 Dimple API。 请指教。 Bootstrap 似乎不适用于此。


Bootstrap 使用起来似乎很简单:

将其添加到您的 .html 文件中。

<div class="row">
  <div class="col-md-6" id="area1"></div>
  <div class="col-md-6" id="area2"></div>
</div>

将 select() 中的 d3 对象与 div 标签中的 id 相关联。

var chart2 = d3.select("#area1").append("svg")
...

var chart2 = d3.select("#area2").append("svg")
...

有关更多详细信息,请按照以下示例进行操作D3-提示和技巧 https://leanpub.com/D3-Tips-and-Tricks/read书。 部分:将 Bootstrap 与 d3.js 结合使用

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否有一个有效的实现可以在一页上显示多个 d3 图表(例如折线图、条形图等)? [关闭] 的相关文章

  • 需要帮助绘制多元线之间的区域 - 而不是从轴到线

    我是 d3 js 的新手 我正在努力填充多元百分位数图中线条之间的区域 我不希望在最底线下方或最顶线上方填充任何区域 第一列始终位于图表的底部 第 5 个百分位 最后一列将始终位于图表的顶部 第 95 个百分位 我需要每条线之间单独的区域段
  • 针对 iOS 10.3 进行编译,但模块“SwiftUICharts”的最低部署目标为 iOS 13.0

    知道如何仅在 iOS 版本超过 iOS 13 时导入 SwiftUICharts 框架吗 我通过 文件 gt Swift 包 gt 添加包依赖项 添加了此框架 我的应用程序目标必须是 iOS 10 我将此框架导入到 swiftui 控制器中
  • D3 向对象添加超链接?

    我正在尝试制作 D3 图 它将代表我网站的菜单 我尝试按照此处的其他指南添加超链接 但它们都不起作用 每个对象都会有一个不同的 URL 指向 主页 关于 联系方式等 如果添加超链接 我可以拖动对象吗 这意味着如果我按住单击 如果我单击该对象
  • 如何将此数据编码为 JSON 中的父/子结构

    我正在使用 d3 js 将动物 有机体 家族 一次最多 4000 个 可视化为树形图 尽管数据源也可以是目录列表或命名空间对象列表 我的数据如下 json organisms name Hemiptera Miridae Kanakamir
  • 如何根据形状字段值将两个不同的形状添加到 D3 力向图?

    我是D3的新手 我正在使用力定向图 我想在节点的位置添加两种不同类型的形状 我的 json 如下 nodes name 00 00 00 00 00 00 00 01 group 0 shape 1 name 00 00 00 00 00
  • 在 Crossfilter 中使用过滤器

    我刚刚开始使用 crossfilter 和 d3 js 我正在尝试 API 参考中给出的一些片段 我有以下数据 var payments crossfilter date 2011 11 14T16 17 54Z quantity 2 to
  • 在 d3.js 中操纵鼠标悬停在“点击区域”

    我想show and hideSVG 中的一个节点 当鼠标移到 mouseout 问题是我的节点内部的形状是一条宽度只有1 5px的路径 因此在鼠标悬停事件中不容易击中该区域 这对用户体验肯定不方便 我想知道是否有办法做到这一点打击范围更广
  • 根据边界动态设置初始 d3 缩放 - V4

    我要在页面上显示大量节点 大多数情况下 由于节点放置 圆圈会超出屏幕的可见区域 有没有办法根据节点的整个边界框动态设置初始缩放级别 以便所有节点都适合屏幕的可见区域 Updated 我为此添加了一个小提琴https jsfiddle net
  • d3 仅限整数刻度线

    我有一个 d3 条形图 其值范围为 0 3 我希望 y 轴仅显示整数值 我可以这样做 var yAxis d3 svg axis scale y orient right tickFormat d3 format d 但是 非整数标记处仍然
  • c3js数据标签的位置

    有没有可能的方法来更改数据上方标签的位置c3条形图 在官方文档中 很好地解释了如何通过操作 y 和 x 整数来更改 x 和 y 测量轴上标签的位置 但我没有找到任何数据标签 我试图用简单的方式指出它d3其上c3是基于但是console lo
  • 设置 Wpf 饼图样式

    这是我的饼图 xaml
  • Android 图表[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在开发一个项目 其中有一些图表 图形 刻度图 烛台图和范围图 但问题是 没有该图表的库 我有烛台图的
  • D3更新circle-pack数据新节点与现有节点重叠

    我正在关注一般更新模式 http bl ocks org mbostock 3808234但在分层方面存在问题 使用圆形包装布局 我pack新数据 update enter and exit圆形元素 然而 当新元素enter 它们重叠upd
  • 为什么我的 D3 SVG 图上的轴不会更新?

    I have 简单的 D3 散点图 http www raxacoricofallapatorius com test scattertest html我在显示数据的几个不同属性之间切换 但是虽然我可以更改数据点 并按照我想要的方式进行转换
  • Highcharts 问题 - 在可缩放图表中显示标签

    我有一个缩放柱形图 xAxis 中有 200 多个类别 因此 当它处于初始状态 比例1 1 时 所有这些家伙都显示在X轴下方 即使我将它们垂直放置 也无法读取任何内容 我需要缩放图表以使标签可见 Here s screenshot of t
  • 获取现有 SVG 元素的属性并使用 d3.js 绑定为数据

    我有一个现有的 svg 元素 例如
  • 如何从此 d3.js layout.tree 获取树祖先和树后代的列表?

    我正在尝试和修改this https bl ocks org mbostock 4339083d3 js 的示例 用于根据 JSON 树结构绘制树 这就是树的一部分开始时的样子 我正在尝试进行两个单独的修改 但我不知道该怎么做 当单击节点的
  • jQuery float bar 数字:数字定位

    我在用着jquery flot barnumbers js https github com joetsoi flot barnumbers 的插件jQuery 的 Javascript 绘图 图表 库 https github com f
  • Dimple.js - 将数据标签添加到条形图的每个条形

    我使用的是dimple js 它基于d3 js 是否可以向本示例中提到的条形图的每个条形添加数据标签http dimplejs org examples viewer html id bars vertical http dimplejs
  • 设置股票数据 Highcharts xAxis 的格式

    我已经浏览了需要为 xAxis 属性设置的 Highcharts 选项来格式化时间标签 但没有运气了解这对于这种情况到底是如何工作的 我在白天 盘中 检索了股票的动态数据 我需要显示这些数据 因为检索的数据每天从 9 30 开始到 17 0

随机推荐