D3条形图和html数据属性
D3 bar chart and html data attributes
我有一个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-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>
我希望从"data-date"answers"data-value"中获得日期和值。我需要对变量"x"answers"y"做哪些相关的修改?
它们现在是这样的:
var x = d3.time.scale()
.domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
.rangeRound([0, width - margin.left - margin.right]);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.total+ (d.total/4); })])
完整的代码可以在这里找到:https://jsfiddle.net/noobiecode/wck4ur9d/49/
不需要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.html()不提供数据属性集值
- 使用数据属性将HTML数据复制到另一个元素
- 使用jQuery在select选项上设置HTML数据属性
- 使用Javascript而不是html数据属性配置Parsley
- 使用 Javascript 编写引用属性数据的 HTML
- 选择具有特定值的 html 数据属性
- Javascript:如何将带有html内容的变量注入到附加的数据属性中
- 生成html时,在html数据属性中存储由.push()填充的数组
- 如何查找所选HTML选项的所有数据属性
- 当通过Jquery data()附加时,以及当直接通过HTML中的数据属性附加时,检查HTML元素中的数据()
- html数据属性在firefox中使用javascript时没有按预期显示,但在chrome中显示正确
- 获取 html 元素的点击事件的数据-* 属性
- AJAX 数据 - 替换 HTML 与更新值属性
- 如何将javascript对象或JSON存储在使用html5数据属性的html元素中
- 使用 PrototypeJS 1.6 访问锚点上的 HTML 数据属性
- JS变量等于html数据属性
- 为什么AngularJS在使用ng-bind-html时会去除数据属性
- 获取 HTML 元素的所有静态数据属性,而无需内部绑定数据
- Html将5个数据属性转换为jquery插件选项格式
- 如何将变量添加到附加的html数据属性中