Javascript D3条形图和html数据属性
我有一个D3可缩放条形图,这是传递到图表中的当前数据:Javascript D3条形图和html数据属性,javascript,d3.js,Javascript,D3.js,我有一个D3可缩放条形图,这是传递到图表中的当前数据: var data = [{"date":"2012-03-20","total":3},{"date":"2012-04-21","total":8},{"date":"2012-05-22","total":2},{"date":"2012-06-23","total":10}, {"date":"2012-07-24","total":3},{"date":"2012-08-25","total":20}, {"date":"2012-
var data = [{"date":"2012-03-20","total":3},{"date":"2012-04-21","total":8},{"date":"2012-05-22","total":2},{"date":"2012-06-23","total":10},
{"date":"2012-07-24","total":3},{"date":"2012-08-25","total":20},
{"date":"2012-09-26","total":12},{"date":"2012-10-23","total":10},
{"date":"2012-11-24","total":3},{"date":"2012-12-25","total":20},{"date":"2012-12-26","total":12}];
我要做的是传递数据属性:
<div class="test">
<div class"red" data-name"bar1" data-date="2012-03-20" data-total="6">
</div>
<div class="blue" data-name="bar2" data-date="2012-04-21" data-total="10">
</div>
</div>
完整代码可在此处找到:
任何帮助都将不胜感激。无需
jquery
,d3
已涵盖:
var data = [];
d3.selectAll(".test>div")
.each(function() {
var self = d3.select(this);
data.push({
date: self.attr("data-date"),
total: +self.attr("data-value")
});
});
更新。无需
jquery
,d3
已涵盖:
var data = [];
d3.selectAll(".test>div")
.each(function() {
var self = d3.select(this);
data.push({
date: self.attr("data-date"),
total: +self.attr("data-value")
});
});
已更新。是否要从这些
div
s中解析数据?或者使用那些div
s来表示条形图?我很困惑…很抱歉让你困惑。我想解析那些div中的数据。所以我想使用jquery来获取它们的日期和值。如果这有意义的话?所以我想使用jquery来获取它们的日期和值。例如,目前我正在使用“data=[]”创建条形图。我要做的是使用div创建条。我希望这是有意义的。您想从那些div
s中解析数据吗?或者使用那些div
s来表示条形图?我很困惑…很抱歉让你困惑。我想解析那些div中的数据。所以我想使用jquery来获取它们的日期和值。如果这有意义的话?所以我想使用jquery来获取它们的日期和值。例如,目前我正在使用“data=[]”创建条形图。我要做的是使用div创建条。我希望这是有道理的。