通过数据ID选择和样式对象
我正在尝试在鼠标悬停事件中圆圈半径变大，并且相应的数据标签会增加字体大小。 数据标签位于图形本身的圆上。 所以我的想法是有两个功能，一个用圆滑的方式来设置圆，并使用一个单独的函数进行文本的样式修改。 我想同时调用两个函数，并让它们只有数据绑定与'id'匹配的样式对象。 Id只是我从.tsv解析的索引。 这个想法是文字和圆都有相同的'ID'。
!boring circle svg code above
.on('mouseenter', function(d) {circle_event(this); text_event(this);})
function circle_event(id) {
if (d3.select(this).data==id) {
d3.select(this)
.transition()
.attr('r', radius*1.5)
.duration(500);
}
}
function text_event(id) {
if (d3.select(this).data==id) {
d3.select(this)
.transition()
.styleTween('font', function() {return d3.interpolate('12px Calibri', '20px Calibri' )
.duration(500);
}
}
出于某种原因，当我将鼠标悬停在圈子上时，什么也没有发生。 开发工具没有任何错误。 如果我不得不猜测，我误解了如何使用d3的选择功能。
谢谢
编辑
请注意，我需要同时调用圆和文本样式函数。我将通过鼠标移动CIRCLE来接受显示如何设置圆和其对应的data_label文本的样式的答案。 看起来this不能同时用作一个圆和一个文本对象。 从一旁的其他解决方案this基础的欢迎。
它看起来像你编辑你的问题，这大大改变了事情。 这里有一种方法可以工作或被修改以使其工作：
// Assumes circle & text objects have the same .x, .y and .id data bound to them and that
// when created, they each have classes "circle-class" and "text-class" respectively
!boring circle svg code above
.on('mouseenter', function(d) {circle_event(d.x, d.y, d.id); text_event(d.x, d.y, d.id);})
function circle_event(x, y, id) {
d3.selectAll(".circle-class")
.filter(function (d) {
return (d.x === x) && (d.y == y) && (d.id == id);
})
.transition()
.attr('r', radius * 1.5)
.duration(500);
}
function text_event(x, y, id) {
d3.selectAll(".text-class")
.filter(function (d) {
return (d.x === x) && (d.y == y) && (d.id == id);
})
.transition()
.styleTween('font', function() {return d3.interpolate('12px Calibri', '20px Calibri' )
.duration(500);
}
或者，如果将圆和文本DOM元素的创建结构d3.select(this.previousElementSibling)具有兄弟关系，则可以使用d3.select(this.previousElementSibling)获得对文本选择的引用，其中this是正在被d3.select(this.previousElementSibling)的圆形节点（请参阅此处 - 在迭代选择时如何访问`this`的前一个“兄弟”）？ 这种方法可以使用我上面的回复中的代码。
你的主要问题是， this不是你想要它在你的嵌套函数。 它不再绑定到正在被覆盖的圆形DOM节点，而是引用全局window 。
对作用域更多信息this在JavaScript可以在这里找到：
嵌套函数中的Javascript“this”指针
http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/
尝试改变这一点：
!boring circle svg code above
.on('mouseenter', function(d) {circle_event(this, d.id)})
function circle_event(selection, id) {
if (d3.select(selection).data==id) {
d3.select(selection)
.transition()
.attr('r', radius*1.5)
.duration(500);
}
}
function text_event(selection, id) {
if (d3.select(selection).data==id) {
d3.select(selection)
.transition()
.styleTween('font', function() {return d3.interpolate('12px Calibri', '20px Calibri' )
.duration(500);
}
}
你应该在函数中传递this ：
.on('mouseenter', function(d) {circle_event(this)})
function circle_event(item) {
d3.select(item)
.transition()
.attr('r', radius*1.5)
.duration(500);
}
function text_event(item) {
d3.select(item)
.transition()
.styleTween('font', function() {return d3.interpolate('12px Calibri', '20px Calibri' )
.duration(500);
}
你不需要d.id因为this已经是选定的圈子