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分组条形图 的相关文章

随机推荐

  • 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