D3.js分组条形图

2024-05-10

I am making a bar chart using D3.js like thisbar chart
(source: statcan.gc.ca http://www.statcan.gc.ca/pub/12-593-x/2007001/figures/figure2.gif)

但它应该是垂直的。所以我可以通过两组数据来进行比较。 我使用来自的教程http://bost.ocks.org/mike/bar/2/ http://bost.ocks.org/mike/bar/2/为了进行比较,我构建了两个类“chart”和“chart1”,并分别给它们提供数据,但它只显示第一个 svg 图表。问题是什么? 这是代码http://jsfiddle.net/x8rax/ http://jsfiddle.net/x8rax/

<meta charset="utf-8">
<style>

.chart rect {
  fill: rgb(203, 232, 118);
}

.chart2 rect {
  fill: rgb(50, 50, 50);
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var data = [4, 8, 15, 16, 23, 42];


var width = 420,
    barHeight = 80;

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);


var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 60);


bar.append("text")
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d; });


//data is not so much interesting here.
</script>

<svg class = "chart2"></svg>
<script>
var data2 = [10, 10, 10, 10, 10, 10];

var width = 420,
    barHeight = 80;

var x2 = d3.scale.linear()
    .domain([0, d3.max(data2)])
    .range([0, width]);

var chart2 = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);

var bar2 = chart.selectAll("g")
    .data(data2)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight +")"; });

bar2.append("rect")
    .attr("width", x2)
    .attr("height", barHeight - 60);

</script>

编辑:明白了。您在 3 个位置遗漏了第二组变量的名称:

1.

var chart2 = d3.select(".chart")(应该chart2)

2.

.attr("height", barHeight * data.length);(应该data2)

3.

var bar2 = chart.selectAll("g")(应该chart2)

将留下我对下面的放置所做的事情。请注意position:absolute on chart使chart2与它重叠。

您的代码有几个问题,我只是复制了有效的部分并对数据进行了更改。我将尝试找到您代码中的所有问题并编辑我的答案。

目前,这是一个可行的解决方案。我认为导致问题的原因是一些命名混乱,所以我只是覆盖两个图表的相同变量。一旦添加了 svg 元素,您就不需要保留变量了。

var data = [4, 8, 15, 16, 23, 42];


var width = 420,
    barHeight = 80;

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);


var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 60);

var data = [10, 10, 10, 10, 10, 10];


var width = 420,
    barHeight = 80;

var chart = d3.select(".chart2")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + (i * barHeight + barHeight - 60 )  +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 60);

http://jsfiddle.net/x8rax/6/ http://jsfiddle.net/x8rax/6/

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

D3.js分组条形图 的相关文章

  • 当条件满足时如何打破CasperJS的重复功能?

    我想知道是否可以打破 casper repeat 循环 我有这个脚本可以做到这一点 在谷歌上搜索特工001 特工002 特工003 特工004 特工005 特工006 直到特工011 我希望它在找到文本 詹姆斯 邦德 后停止循环 现在它找到
  • Firebase Function 从其他文件导入函数 - javascript

    我正在使用 javascript 构建 firebase 函数 现在我有很多内部调用函数 我计划将这些函数移动到不同的文件中 以避免 index js 变得非常混乱 下面是当前的文件结构 functions index js interna
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • 如何使用 JavaScript 将当前页面设置为 about:blank?

    我遇到的情况是服务器可能在当前地址上不可用 因此我想检测到这一点并将页面重定向到 about blank 页面 我该如何使用 JavaScript 来做到这一点 window location href about blank
  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp
  • less.js - 在解析器回调中获取变量值

    我正在使用 less js 1 3 0 在客户端将 less 解析为 css 在解析器的回调中 我想获取每个变量的值 我尝试了以下方法但没有成功 var data colour red example background color co
  • Child_process 处理带有回车符 (\r) 的 STDOUT 流

    我正在编写一个简单的应用程序 它允许工作中的内部系统请求从远程服务器到使用 REST 调用发起的另一个远程服务器的复制过程 使用 rsync 我已经对express框架足够熟悉 并且刚刚开始尝试child process库 并偶然发现了一个
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • javascript中输入类型时间的值

    我有这个html
  • 使用 javascript 禁用按钮:FF 与 IE

    我有一排按钮 它们都会创建一个我想在新选项卡中打开的 pdf 文件 这样按钮页面就会保持在顶部 并且 pdf 会打开以进行打印 为了防止单击按钮两次 我禁用该按钮 如下所示 我使用 python
  • 获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML

    试图找出如何让链接实际呈现为链接 现在 在我从 Json 文件中读取这行文本后 React 将超链接渲染为文字文本 而不将其渲染为链接 一些数据 json about John has a blog you can read a href
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • 如何检查 Map 或 Set 是否为空?

    对于 JavaScript 中的传统对象 使用以下命令很容易检查它是否为空 Object keys method const emptyObj console log Object keys emptyObj length 0 true i
  • React + Semantic-UI:在 UI MODAL 中使用表单

    在没有 React 的普通旧 Semantic UI 中 我已经能够毫无问题地将表单放入 Modal 中 使用 Semantic UI React 版本 我能够在模态中显示表单 但它并没有按照我期望的方式工作 例如 模态框显示后 模态框内的
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • 为什么 JSON 结果可以是布尔值而不是对象或数组?

    From JSON 网站 http json org JSON 建立在两种结构之上 名称 值对的集合 在各种语言中 这被实现为对象 记录 结构 字典 哈希表 键控列表或关联数组 值的有序列表 在大多数语言中 这被实现为数组 向量 列表或序列
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • 使用 javascript Array reduce() 方法有什么真正的好处吗?

    reduce 方法的大多数用例都可以使用 for 循环轻松重写 对 JSPerf 的测试表明 reduce 通常会慢 60 75 具体取决于每次迭代内执行的操作 除了能够以 函数式风格 编写代码之外 还有什么真正的理由使用reduce 吗
  • 如何使用引用该键的变量来获取对象键中的值?

    我有一个对象 我可以引用密钥a如下 var obj a A b B c C console log obj a return string A 我想通过使用变量引用对象键来获取值 如下所示 var name a console log ob
  • Nodejs 一个接一个地运行异步函数

    我是 JS nodejs 的新手 所以如果我不能提出切中要害的问题 请原谅我 所以基本上 如果我有两个异步函数 async function init async function main 如何确保在 init 完成其异步请求后调用 ma

随机推荐

  • WCF Rest 服务还是 ASP.NET MVC 控制器/操作?

    如果有人能提供一些关于哪种更有益的见解 我将不胜感激 WCF 中的 RESTful 服务可以提供与 ASP Net MVC 控制器相同的功能 即可以使用控制器 操作适当地形成 URL 使用其中一种比另一种有真正的好处吗 WCF休息服务将提供
  • HTML Agility 包删除了中断标记 close

    我正在使用 HTML 敏捷包创建 HTML 文档 我加载一个模板文件 然后将内容附加到其中 所有这些都有效 但是当我查看输出文件时 它已从我的文件中删除了结束标记 br 标签看起来像这样 br 是什么原因造成的 Dim doc As New
  • 如何检查文件是否存在,如果不存在则终止构建?

    如果文件不存在 如何停止构建并通知用户 我知道如果文件存在 我可以使用可用任务来设置属性 但我不确定如何停止构建并回显某些内容 如果可能的话 我想坚持核心任务 您可以使用任务失败 http ant apache org manual Tas
  • 在 Objective-C iPad 开发中发布

    我正在尝试发出 POST 请求 但我似乎无法弄清楚出了什么问题 我从服务器收到响应 但我的电子邮件 密码对似乎没有正确发送 读取 由服务器 它告诉我不存在这样的帐户 这是我的代码 它包含在一个函数中 当用户按下我创建的 登录 按钮时调用该函
  • 如何判断 OpenMP 是否正常工作?

    我正在尝试以并行模式运行 LIBSVM 但我的问题一般是在 OpenMP 中 根据LIBSVM 常见问题解答 http www csie ntu edu tw cjlin libsvm faq html f432 我已使用 pragma 调
  • \r 和 \n 在 PHP(和其他语言)中意味着什么?

    这些叫什么 r n 有解释它们的教程吗 它们分别是 回车 和 换行 通常在 Windows 上 您需要将两者一起表示行终止符 r n 而在大多数 全部 Unix 系统上 n 就足够了 See the 维基百科换行条目 http en wik
  • MVC3 中的 ModelState.IsValid 与 IValidatableObject

    所以根据Gu http weblogs asp net scottgu archive 2010 07 27 introducing asp net mvc 3 preview 1 aspx IValidatableObject Valid
  • 如何创建新的私人文本频道并向其中添加 2 个人?

    我正在创建一个不和谐的机器人 用户将向机器人发送消息并 机器人将创建一个新的私人文本通道 最好与机器人位于同一服务器上 机器人只会将消息传递用户和管理员添加到频道 我已经能够使用创建一个新频道这个问题 https stackoverflow
  • 日期减去 xslt 中的另一个日期

    希望有人能帮忙 我正在尝试比较 XML 文件中的 2 个日期并使用 XSLT 进行一些计算 例如 我有 2 个 XML 日期 2011 05 23 和 2011 04 29 我想在 XSLT 中进行计算 如下所示 2011 05 23 20
  • V8 如何管理它的堆?

    我知道V8的垃圾收集在工作时 会从GC的root开始追踪 这样无法到达的对象就会被标记然后被清除 我的问题是GC是如何遍历那些对象的 必须有一个数据结构来存储所有可达或不可达的对象 位图 链接表 顺便说一句 JVM 也做同样的事情吗 艾伦秀
  • 为什么单击拖动手柄不会夺走文本焦点?

    我有一个带有一些文本的 divhttp jsfiddle net MuCeD 2 http jsfiddle net MuCeD 2 如果我双击 div 中的 sample 一词 它就会突出显示 如果我然后单击页面上的其他任何位置 文本就会
  • Python 在 anaconda 中找不到 h2o 包

    当我尝试导入 h2o 时 我被告知该包不存在 当我尝试安装它时 它告诉我它已经存在 我尝试将其从计算机中删除并重新安装 但没有成功 此时我能想到的只是一些环境变量 C Users Lanier Anaconda2 C Users Lanie
  • JPanel透明背景和显示元素[重复]

    这个问题在这里已经有答案了 我插入一个背景图e 变成 aJPanel但一些界面元素消失了 以下 Java Swing 元素不会出现 标签标题 标签 usuario 标签 密码 按钮加速器 你能否使图像透明或元素不透明 setOpaque f
  • 修复 JSLint“意外的‘this’。”错误?

    我试图让以下代码成为符合 jslint 标准 http jslint com 但我陷入以下两个错误 本来应该看到一个声明 结果却看到了一个块 and 意想不到的 这个 我应该对我的代码进行哪些更改才能使 JSLint 满意 var pvAc
  • 修复了当 CSS 过滤器应用于 Microsoft Edge 中的同一元素时不起作用的位置

    我正在 Edge 20 10240 16384 0 上测试这个 我有一个位置固定的元素 并且应用了 CSS 过滤器 这在除 Microsoft Edge 之外的所有浏览器中都非常有效 其中元素的位置不保持固定 此问题与 CSS3 过滤器直接
  • 如何使用 wampserver 在本地系统上将 URL 从“localhost”更改为其他内容?

    在 Windows 计算机上 有一个系统在本地 wampserver 上运行 但当应用程序在 localhost 上运行时 URL 却另有说明 虽然我希望基于目录结构的 URL 是这样的 http localhost pro include
  • MAC 上的 QT/C++ - 未设置应用程序图标

    我正在努力解决的奇怪问题 在与我的 pro QT 项目文件相同的文件夹中 我有一个 Resources myIcon png 我试图将其设置为我构建的应用程序的图标 在 OSX 上运行 我阅读了文档 它建议在 pro 文件中添加 ICON
  • Java Swing:清除JList而不触发监听器

    我的情况如下 我有一个 JList 只要在列表中进行选择 它就会触发搜索 使用 ListSelectionListener 我正在尝试使用以下命令重置列表上的选择list clearSelection 这样做的问题是使用clearSelec
  • 如何处理 ReST 中的两个破折号

    我正在使用 Sphinx 来记录用 Python 编写的命令行实用程序 我希望能够记录命令行选项 例如 region像这样 region
  • D3.js分组条形图

    I am making a bar chart using D3 js like this source statcan gc ca http www statcan gc ca pub 12 593 x 2007001 figures f