Javascript 如何使D3js对象更改它'；鼠标在对象附近移动时的属性？

这个想法是让一个对象在对象附近的鼠标移动时做出反应

这就是我现在在这方面所取得的进展：

//declaring a canvas
var canvas = d3.select("body")
               .append("svg")
               .attr("width", 100)
               .attr("height", 100);

//create circle with attributes and listeners         
var circles = canvas.selectAll("circle")
                    .data([1])
                    .enter()
                    .append("circle")
  .attr("cy", 50).attr("cx", 50).attr("r", 20)
  .style({"fill": "grey"})      
  .on("mousemove", handleMouseMove);

//listener on mouse move inside the canvas
function handleMouseMove(){
    var coordinates = [0, 0];
      coordinates = d3.mouse(this);
      var x = coordinates[0];
      var y = coordinates[1];
      console.log(x,y);
      console.log(this.attributes);
}

---

我只能在将鼠标悬停在对象上时才能获取具有其属性的对象-请参阅最后一篇

console.log（）。我被困在这上面了。如果有解决方案，请分享您的想法。
如果您想检测到鼠标靠近圆圈，您需要在包含圆圈的对象上设置事件处理程序，在本例中，您的
画布
变量中包含的
svg
。然后，为了确定鼠标是否靠近，我将使用点

评论更新


var canvas=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）
.on（“mousemove”，handleMouseMove）；
var数据=[]；
对于（变量i=0；i<10；i++）{
数据推送({
x:Math.random（）*500，
y:Math.random（）*500
});
}
var circles=canvas.selectAll（“圆”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cy”，函数（d）{
返回d.y；
})
.attr（“cx”，功能（d）{
返回d.x；
})
.attr（“r”，10）
.风格({
“填充”：“灰色”
});
函数handleMouseMove（）{
变量坐标=d3.鼠标（此），
x=坐标[0]，
y=坐标[1]；
圆形。样式（“填充”、“灰色”）；
var closestCircle={
obj:null，
地区：1e100
};
圆。每个（函数（d）{
var dist=Math.sqrt（Math.pow（d.x-x，2）+Math.pow（d.y-y，2））；
if（距离<最近圆距离）{
闭合圆={
obj：这个，
地区：地区
};
}
});
d3.选择（closestCircle.obj）.样式（“填充”、“绿色”）；
}
如果要检测鼠标靠近圆圈，则需要在包含圆圈的对象上设置事件处理程序，在本例中是
画布中包含的
svg
变量。然后，为了确定鼠标是否靠近，我将使用点

评论更新


var canvas=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）
.on（“mousemove”，handleMouseMove）；
var数据=[]；
对于（变量i=0；i<10；i++）{
数据推送({
x:Math.random（）*500，
y:Math.random（）*500
});
}
var circles=canvas.selectAll（“圆”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cy”，函数（d）{
返回d.y；
})
.attr（“cx”，功能（d）{
返回d.x；
})
.attr（“r”，10）
.风格({
“填充”：“灰色”
});
函数handleMouseMove（）{
变量坐标=d3.鼠标（此），
x=坐标[0]，
y=坐标[1]；
圆形。样式（“填充”、“灰色”）；
var closestCircle={
obj:null，
地区：1e100
};
圆。每个（函数（d）{
var dist=Math.sqrt（Math.pow（d.x-x，2）+Math.pow（d.y-y，2））；
if（距离<最近圆距离）{
闭合圆={
obj：这个，
地区：地区
};
}
});
d3.选择（closestCircle.obj）.样式（“填充”、“绿色”）；
}
如果可以的话，最干净的方法可能是在现有圆的正下方放置另一个半径更大的圆，填充透明：

var g = canvas.selectAll("g")
    .data([1])
    .enter()
    .append("g")
    .on("mouseover", handleMouseOver) // event handlers here are applied
    .on("mouseout", handleMouseOut)   // to both 'circle'

g.append('circle').classed('invisible', true) // this goes before the
    .attr("cy", 50)                           // visible circle
    .attr("cx", 50)
    .attr("r", 40)
    .style({"fill": "transparent"});

g.append('circle').classed('visible', true)
    .attr("cy", 50)
    .attr("cx", 50)
    .attr("r", 20)
    .style({"fill": "grey"});

    function handleMouseOver(d,i){
        d3.select(this).select('.visible').transition()
            .style({"fill": "red"});            
    };

    function handleMouseOut(d,i){
        d3.select(this).select('.visible').transition()
            .style({"fill": "green"});          
    };

或者，如果要使用鼠标位置：

var circles = canvas.selectAll("circle")
    .data([1])
    .enter()
    .append("circle")
        .attr("cy", 50)
        .attr("cx", 50)
        .attr("r", 20)
        .style({"fill": "grey"})        
        .on("mousemove", handleMouseMove);

function handleMouseMove(){
    var coordinates = [];
    coordinates = d3.mouse(this);
    var x = coordinates[0];
    var y = coordinates[1];

    if (x>10 && x<90 && y>10 && y<90) {     // example values; this is a rectangle but you can use more complex shapes
         d3.select('.visible').style({"fill": "red"});
    }
    else {
        d3.select('.visible').style({"fill": "green"});
    }

var circles=canvas.selectAll（“圆”）
.数据（[1]）
.输入（）
.附加（“圆圈”）
.attr（“cy”，50）
.attr（“cx”，50）
.attr（“r”，20）
.style（{“填充”：“灰色”}）
.on（“mousemove”，handleMouseMove）；
函数handleMouseMove（）{
变量坐标=[]；
坐标=d3.鼠标（此）；
var x=坐标[0]；
变量y=坐标[1]；
如果（x>10&&x10&&y，如果可以的话，可能最干净的方法是在现有圆的正下方放置另一个半径更大的圆，填充透明：

var g = canvas.selectAll("g")
    .data([1])
    .enter()
    .append("g")
    .on("mouseover", handleMouseOver) // event handlers here are applied
    .on("mouseout", handleMouseOut)   // to both 'circle'

g.append('circle').classed('invisible', true) // this goes before the
    .attr("cy", 50)                           // visible circle
    .attr("cx", 50)
    .attr("r", 40)
    .style({"fill": "transparent"});

g.append('circle').classed('visible', true)
    .attr("cy", 50)
    .attr("cx", 50)
    .attr("r", 20)
    .style({"fill": "grey"});

    function handleMouseOver(d,i){
        d3.select(this).select('.visible').transition()
            .style({"fill": "red"});            
    };

    function handleMouseOut(d,i){
        d3.select(this).select('.visible').transition()
            .style({"fill": "green"});          
    };

或者，如果要使用鼠标位置：

var circles = canvas.selectAll("circle")
    .data([1])
    .enter()
    .append("circle")
        .attr("cy", 50)
        .attr("cx", 50)
        .attr("r", 20)
        .style({"fill": "grey"})        
        .on("mousemove", handleMouseMove);

function handleMouseMove(){
    var coordinates = [];
    coordinates = d3.mouse(this);
    var x = coordinates[0];
    var y = coordinates[1];

    if (x>10 && x<90 && y>10 && y<90) {     // example values; this is a rectangle but you can use more complex shapes
         d3.select('.visible').style({"fill": "red"});
    }
    else {
        d3.select('.visible').style({"fill": "green"});
    }

var circles=canvas.selectAll（“圆”）
.数据（[1]）
.输入（）
.附加（“圆圈”）
.attr（“cy”，50）
.attr（“cx”，50）
.attr（“r”，20）
.style（{“填充”：“灰色”}）
.on（“mousemove”，handleMouseMove）；
函数handleMouseMove（）{
变量坐标=[]；
坐标=d3.鼠标（此）；
var x=坐标[0]；
变量y=坐标[1]；
如果（x>10&&x10&&Y）回答为“标记”，则此处的问题是您的代码无法处理实际的圆对象（坐标
circPos
不是圆对象属性），它只是计算距离，而这不是一个问题。想象一下，如果我们使用一组对象。如何得到一个，比如说，鼠标离它更近。@Vadim:
它只是计算距离，而这不是一个问题。
-你问过如何判断某个对象是否接近另一个对象；看起来像是对象之间的距离，是问题。请参阅上面的更新答案。更新版本非常有趣，谢谢。@瓦迪姆，我想到的另一个想法是使用Voronoi来确定最近的圆：。我一定会看一看，谢谢。马克，谢谢你的答案，这里的问题是你的代码不能处理实际的圆对象（坐标
circPos
不是圆对象属性），它只是计算距离，而这不是一个问题。想象一下，如果我们使用一组对象。如何得到一个，比如说，鼠标离它更近。@Vadim:
它只是计算距离，而这不是一个问题。
-你问过如何判断某个对象是否接近另一个对象；看起来像是对象之间的距离，是问题。请参阅上面的更新答案。更新版本非常有趣，谢谢。@瓦迪姆，我想到的另一个想法是使用Voronoi来确定最近的圆：。我一定会看一看，谢谢。