本文介绍了将数据绑定到轴刻度线d3.js的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将数据绑定到我的坐标轴刻度线(按顺序刻度生成),以便稍后在鼠标悬停事件上使用.
I would bind data to my axis ticks (generated by ordinal scale) to use it later on mouseover event.
我不想显示它,只需将其绑定:
I don't want to display it, just bind it:
//data what I would like to bind on each tick (eg. "<0,1" tick binded to 10
//"<0,2" tick binded to 28
//"<0,3" tick binded to 4
//...
var data = [10,28,4,6,10,65,87,54, 9, 1,45];
//what is display on tick
this.xLabelsValues = ["<0,1", "<0,2", "<0,3", "<0,4", "<0,5",
"<0,6", "<0,7", "<0,8", "<0,9", "<1", "=1"];
this.x = d3.scale.ordinal()
.rangeRoundBands([0, this.width], .1);
this.x.domain(chart.xLabelsValues);
this.svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + this.height + ")")
.call(this.xAxis);
//my event
this.svg.selectAll(".tick").on("mouseover", this.mouseover);
this.mouseover = function(d, e){
//I want my binded data here!
};
有可能还是我要欺骗一些东西?
Is that possible or I've to trick something?
推荐答案
刻度已经绑定到刻度值.
The ticks are already bound to the tick values.
类似这样的技巧来设置一些额外的数据:
Something like this trick to set some extra data:
d3.selectAll(".tick")[0].forEach(function(tick){
//set the data all ticks
d3.select(tick)[0][0].myData = {foo:"bar"}
});
从报价中获取数据
d3.selectAll(".tick")[0].forEach(function(tick){
//set the data
console.log(d3.select(tick)[0][0].myData)
});
这篇关于将数据绑定到轴刻度线d3.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!