我正在使用基于 d3 和 crossfilter 的 Dimensional Charting javascript 库 dc.js 制作多折线图。我是 dc.js 库的新手。我正在尝试使用 csv 文件显示多线图表。我无法理解如何按照 csv 格式创建多线图表。
我的 csv 列格式是
Age_19_Under Age_19_64 Age_65_84 Age_85_and_Over
26.9 62.3 9.8 0.9
23.5 60.3 14.5 1.8
24.3 62.5 11.6 1.6
24.6 63.3 10.9 1.2
24.5 62.1 12.1 1.3
24.7 63.2 10 2.2
25.6 58.5 13.6 2.4
24.1 61.6 12.7 1.5
24.8 59.5 13.5 2.2
我正在尝试愚弄代码:
{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<head>
<link href="{% static 'css/dc.css' %}" rel="stylesheet" media="screen">
<link href="{% static 'css/example-styles.css' %}" rel="stylesheet" media="screen">
</head>
<div class="container" style="margin-top: 140px">
<div class="col-lg-12" id="chart-row-Poverty1">
</div>
</div>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
<script type="text/javascript" src="{% static 'js/crossfilter.js' %}"></script>
<script type="text/javascript" src="{% static 'js/dc.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
<script type="text/javascript" src="{% static 'js/index.js' %}"></script>
<script type="text/javascript">
var lineChart1=dc.compositeChart("#chart-row-Poverty1");
var g;
d3.csv("{% static 'sampledata/helthdata.csv' %}", function(error, experiments) {
var dateFormat = d3.time.format("%Y");
var numberFormat = d3.format(",f");
var ndx = crossfilter(experiments);
var all = ndx.groupAll();
var runDimension = ndx.dimension(function(d) {return [+d.Age_19_Under, +d.Age_19_64, +d.Age_65_84,+d.Age_85_and_Over]; });
var runGroup = runDimension.group().reduceSum(function(d) { return 1; });
lineChart1.width(1160)
.height(250)
.margins({top: 10, right: 10, bottom: 20, left: 40})
.dimension(runDimension)
.group(runGroup)
.transitionDuration(500)
.elasticY(true)
.brushOn(false)
.valueAccessor(function (d) {
return d.value;
})
.title(function(d){
return "\nNumber of Povetry: "+d.key;
})
.x(d3.scale.linear().domain([4, 27]))
.xAxis();
dc.renderAll();
});
</script>
{% endblock %}
最佳答案
将维度视为您希望沿 X 轴查看的值，将组视为您希望将 X 轴上任何一个坐标的数据组合成单个 Y 值的方式可能会有所帮助.这样，一组代表多线图上一条线的数据。完成后，您需要在 dc.js 中创建 N+1 个图表。也就是说，您要查看的每个图形对应一个 lineChart，然后用一个 compositeChart 将它们收集在一起。单独的 lineCharts 可以非常简单，因为它们将从包含它们的 compositeChart 继承许多属性。
直到我整理完下面的代码，我才注意到您为 X 轴设置的实际值，并意识到我认为我可能误解了您真正想要做的事情。对于那个很抱歉。希望它仍能为您阐明基本思想。
var experiments = [
{ Run: 1, Age_19_Under: 26.9, Age_19_64: 62.3, Age_65_84: 9.8, Age_85_and_Over: 0.9 },
{ Run: 2, Age_19_Under: 23.5, Age_19_64: 60.3, Age_65_84: 14.5, Age_85_and_Over: 1.8 },
{ Run: 3, Age_19_Under: 24.3, Age_19_64: 62.5, Age_65_84: 11.6, Age_85_and_Over: 1.6 },
{ Run: 4, Age_19_Under: 24.6, Age_19_64: 63.3, Age_65_84: 10.9, Age_85_and_Over: 1.2 },
{ Run: 5, Age_19_Under: 24.5, Age_19_64: 62.1, Age_65_84: 12.1, Age_85_and_Over: 1.3 },
{ Run: 6, Age_19_Under: 24.7, Age_19_64: 63.2, Age_65_84: 10, Age_85_and_Over: 2.2 },
{ Run: 7, Age_19_Under: 25.6, Age_19_64: 58.5, Age_65_84: 13.6, Age_85_and_Over: 2.4 },
{ Run: 8, Age_19_Under: 24.1, Age_19_64: 61.6, Age_65_84: 12.7, Age_85_and_Over: 1.5 },
{ Run: 9, Age_19_Under: 24.8, Age_19_64: 59.5, Age_65_84: 13.5, Age_85_and_Over: 2.2 },
];
var ndx = crossfilter(experiments);
var all = ndx.groupAll();
var runDimension = ndx.dimension(function (d) { return d.Run; });
var age19UnderGroup = runDimension.group().reduceSum(function (d) { return d.Age_19_Under; });
var age19To64Group = runDimension.group().reduceSum(function (d) { return d.Age_19_64; });
var age65To84Group = runDimension.group().reduceSum(function (d) { return d.Age_65_84; });
var age85AndOverGroup = runDimension.group().reduceSum(function (d) { return d.Age_85_and_Over; });
lineChart1.width(1160)
.height(250)
.margins({ top: 10, right: 10, bottom: 20, left: 40 })
.dimension(runDimension)
.transitionDuration(500)
.elasticY(true)
.brushOn(false)
.valueAccessor(function (d) {
return d.value;
})
.title(function (d) {
return "\nNumber of Povetry: " + d.key;
})
.x(d3.scale.linear().domain([4, 27]))
.compose([
dc.lineChart(lineChart1).group(age19UnderGroup),
dc.lineChart(lineChart1).group(age19To64Group),
dc.lineChart(lineChart1).group(age65To84Group),
dc.lineChart(lineChart1).group(age85AndOverGroup)
])
;
dc.renderAll();
请注意我是如何在您的数据中插入“运行”属性来为维度创建统一值的。我选择整数是因为它们很简单，但值也可以是日期、实验名称或在数据中创建行的任何内容。数据集中的值直接显示在图表中，因为我选择的维度具有所有唯一值。如果有重复的值(比如第 10 行 Measurement = 9，每个年龄段的值为 10)，那么给定维度值的所有数据将通过 .reduceSum() 方法汇总在一起(因此，一个值X 轴上的 9 为 34.8)。
关于javascript - 如何使用 dc.js 创建多线图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23026983/
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
我正在尝试使用ruby和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru