在多图表 dc.js/d3.js 演示中，我希望让用户点击第一个图表中的数据点，并且:
例如，用户点击第一个图表上的类次 2。 140 辆汽车是在那次转变中制造的。在图表 1 中，三个类次在该类次生产的 30 以内:2、7、10。我希望将这 3 个数据点设为绿色，然后在图表 2 和 3 中也将类次 2、7、10 设为绿色。 (还有，原来点击的数据点应该是红色的)
我不确定如何将 greendot 类添加到三个图表中的三个数据点。
clearconsole();
var chartWidth = 500;
var myCSV = [
{"shift":"1","date":"01/01/2016/08/00/00","car":"178","truck":"125","bike":"317","moto":"237"},
{"shift":"2","date":"01/01/2016/17/00/00","car":"125","truck":"189","bike":"125","moto":"273"},
{"shift":"3","date":"02/01/2016/08/00/00","car":"140","truck":"219","bike":"328","moto":"1252"},
{"shift":"4","date":"02/01/2016/17/00/00","car":"222","truck":"290","bike":"432","moto":"378"},
{"shift":"5","date":"03/01/2016/08/00/00","car":"200","truck":"250","bike":"420","moto":"319"},
{"shift":"6","date":"03/01/2016/17/00/00","car":"230","truck":"220","bike":"310","moto":"413"},
{"shift":"7","date":"04/01/2016/08/00/00","car":"155","truck":"177","bike":"377","moto":"180"},
{"shift":"8","date":"04/01/2016/17/00/00","car":"179","truck":"203","bike":"405","moto":"222"},
{"shift":"9","date":"05/01/2016/08/00/00","car":"208","truck":"185","bike":"360","moto":"195"},
{"shift":"10","date":"05/01/2016/17/00/00","car":"150","truck":"290","bike":"315","moto":"280"},
{"shift":"11","date":"06/01/2016/08/00/00","car":"200","truck":"220","bike":"350","moto":"205"},
{"shift":"12","date":"06/01/2016/17/00/00","car":"230","truck":"170","bike":"390","moto":"400"},
];
console.log('Click on a datapoint in chart1 to begin ');
lc1 = dc.lineChart("#line1");
lc2 = dc.lineChart("#line2");
lc3 = dc.lineChart("#line3");
var dateFormat = d3.time.format("%d/%m/%Y/%H/%M/%S");
myCSV.forEach(function (d) {
d.date = dateFormat.parse(d.date);
});
myCSV.forEach(function (d) {
d['car'] = +d['car'];
d['bike'] = +d['bike'];
d['moto'] = +d['moto'];
});
//console.log(myCSV);
var facts = crossfilter(myCSV);
var dateDim = facts.dimension(function (d) {return d.date});
var carDim = facts.dimension(function (d) {return d['car']});
var dgCar = dateDim.group().reduceSum(function (d) {return d['car']});
var bikeDim = facts.dimension(function (d) {return d['bike']});
var dgBike = dateDim.group().reduceSum(function (d) {return d['bike']});
var motoDim = facts.dimension(function (d) {return d['moto']});
var dgMoto = dateDim.group().reduceSum(function (d) {return d['moto']});
var minDate = new Date ("2016-01-01T08:00:00.000Z");
var maxDate = new Date ("2016-01-06T17:00:00.000Z");
var maxY = d3.max(myCSV, function(d) {return d['car']});
lc1
.renderArea(false)
.width(chartWidth)
.height(250)
.dimension(dateDim)
.group(dgCar)
.defined(function(d) {if(d.y !==null) {return d.y;}})
.transitionDuration(1000)
.margins({top: 30, right: 20, bottom: 35, left: 60})
.yAxisLabel('Cars')
.renderHorizontalGridLines(true)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]));
lc1.yAxis().ticks(5);
lc1.xAxis().ticks(3);
lc2
.renderArea(false)
.width(chartWidth)
.height(250)
.dimension(dateDim)
.group(dgBike)
.defined(function(d) {if(d.y !==null) {return d.y;}})
.transitionDuration(1000)
.margins({top: 30, right: 20, bottom: 35, left: 60})
.yAxisLabel('Bikes')
.renderHorizontalGridLines(true)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]));
lc2.yAxis().ticks(5);
lc2.xAxis().ticks(3);
lc3
.renderArea(false)
.width(chartWidth)
.height(250)
.dimension(dateDim)
.group(dgMoto)
.defined(function(d) {if(d.y !==null) {return d.y;}})
.transitionDuration(1000)
.margins({top: 30, right: 20, bottom: 35, left: 60})
.yAxisLabel('Motos')
.renderHorizontalGridLines(true)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]));
lc3.yAxis().ticks(5);
lc3.xAxis().ticks(3);
lc1.on('renderlet', function(lc1) {
console.log('myCSV.length: '+myCSV.length);
var allDots1 = lc1.selectAll('circle.dot');
var allDots2 = lc2.selectAll('circle.dot');
var allDots3 = lc3.selectAll('circle.dot');
allDots1.on('click', function(d,i) { //i==index, d==obj of clicked point
console.log(JSON.stringify(myCSV[i]));
var arrWeeks = [];
allDots1.filter((d,j)=> j===i).classed('reddot');
for (var xx=0;xx<myCSV.length;xx++){
var t1 = myCSV[xx].car - d.y;
var t2 = d.y - myCSV[xx].car;
var looptest = (t1<30 && t1>0) || (t2<30 && t2>0);
console.log(myCSV[xx].car +' (loop val) is/not within 30 of '+d.y+ '(clicked val)' + looptest);
if ( (t1<30 && t1>0) || (t2<30 && t2>0) ){
arrWeeks.push(xx); //All index points in "Cars" that are within 30 of clicked point
}
//Next line doesn't work:
//allDots2.filter((d,j)=> j===xx).classed('greendot').style('fill-opacity', 1);
}//ENDFOR
console.log("%s %o", 'arrWeeks: ', arrWeeks);
/*
Loop through all 3 "allDotsN" d3 collections and add
greendot class to each circle that is at one of the
index values in arrWeeks. For example, if arrWeeks contains
[2,4,6] then the 3rd, 5th and 7th dot points in all three
graphs should be green (and the original clicked-on datapoint should be red)
*/
// allDots1.filter((d,j)=> j===arrWeeks[]).classed('greendot').style('fill-opacity', 1);
// allDots2.filter((d,j)=> j===arrWeeks[]).classed('greendot').style('fill-opacity', 1);
// allDots3.filter((d,j)=> j===arrWeeks[]).classed('greendot').style('fill-opacity', 1);
});//END allDots1.on(click);
});//END lc1.on(renderlet)
dc.renderAll();
dc.redrawAll();
function clearconsole(){
console.API;
if (typeof console._commandLineAPI !== 'undefined') {
console.API = console._commandLineAPI; //chrome
} else if (typeof console._inspectorCommandLineAPI !== 'undefined') {
console.API = console._inspectorCommandLineAPI; //Safari
} else if (typeof console.clear !== 'undefined') {
console.API = console;
}
console.API.clear();
}svg{height:280px;width:500px;}
.greendot{stroke:green !important; fill:green !important; fill-opacity:1 !important;}
.reddot{stroke:red !important; fill:red !important; fill-opacity:1 !important;}<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link href="http://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet"/>
<svg id="line1"></svg>
<svg id="line2"></svg>
<svg id="line3"></svg>
最佳答案
使用 .classed('yourclass', true)，参见 docs :
allDots1.on('click', function(d, i) { //i==index, d==obj of clicked point
console.log(JSON.stringify(myCSV[i]));
var arrWeeks = [i];
for (var xx = 0; xx < myCSV.length; xx++) {
var t1 = myCSV[xx].car - d.y;
var t2 = d.y - myCSV[xx].car;
var looptest = (t1 < 30 && t1 > 0) || (t2 < 30 && t2 > 0);
console.log(myCSV[xx].car + ' (loop val) is/not within 30 of ' + d.y + '(clicked val)' + looptest);
if ((t1 < 30 && t1 > 0) || (t2 < 30 && t2 > 0)) {
arrWeeks.push(xx); //All index points in "Cars" that are within 30 of clicked point
}
} //ENDFOR
console.log("%s %o", 'arrWeeks: ', arrWeeks);
allDots1.classed('reddot', false);
allDots1.classed('greendot', false);
allDots2.classed('greendot', false);
allDots3.classed('greendot', false);
arrWeeks.forEach((i) => {
allDots1.filter((d, j) => j === i).classed('greendot', true);
allDots2.filter((d, j) => j === i).classed('greendot', true);
allDots3.filter((d, j) => j === i).classed('greendot', true);
});
allDots1.filter((d, j) => j === i).classed('reddot', true);
});
关于javascript - dc.js 根据第一个图表中的标准向多个图表中的数据点添加类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43986684/
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时
作为我的Rails应用程序的一部分，我编写了一个小导入程序，它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是，与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存，我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关，因为当我删除对LDAP内容的调用时，内存使用情况会很好地稳定下来。此外，不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray，它们都是LDAP库的一部分。当我运行导入时，内存使用量最终达到超过1GB的峰值。如果问题存在，我需要找到一些方法来更正我的代
Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题
我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr