Javascript d3.js气泡图、mousover和mouseout事件仅在第一次工作

新的d3。我的mouseover和mouseout事件处理程序有点问题

我想在使用forceCollide函数选择圆时，将圆进一步分开。这只工作一次，然后圆将保持mouseout或mouseover forceCollide值，而不会返回其原始状态

任何关于我做错了什么的指示都是值得赞赏的

虽然我在做这件事，但如果我用ES6语法编写mouseover函数，我也无法让它们工作，这方面的任何帮助都会很好，但这可能是另一个问题

我把代码贴在下面

d3.csv('../csv/homeless_population.csv')
  .row((data) => {
    return {
      State: data.State,
      PercentHomeless: Number(data.Homeless) / Number(data.Population)
    };
  })
  .get((error, data) => {

    let width = 650;
    let height = 600;

    let maxRadius = d3.max(data, (data) => { return data.PercentHomeless; })
    let minRadius = d3.min(data, (data) => { return data.PercentHomeless; })

    let svg = d3.selectAll('section')
                .append('svg')
                .attr('height', height)
                .attr('width', width)
                .append('g')
                .attr('transform', 'translate(0, 0)')

    let colors = d3.scaleOrdinal(d3.schemePaired);

    let simulation = d3.forceSimulation()
                      .force('x', d3.forceX(width/2).strength(0.5))
                      .force('y', d3.forceY(height/2).strength(0.5))
                      .force('collide', d3.forceCollide((data) => { return r(data.PercentHomeless) + 3; }))

    let r = d3.scaleSqrt()
              .domain([minRadius, maxRadius])
              .range([15,75])


    let circles = svg.selectAll('circles')
                  .data(data)
                  .enter()
                  .append('circle')
                  .attr('stroke', 'black')
                  .attr('fill', (data) => { return colors(data.State); })
                  .attr('r', (data) => { return r(data.PercentHomeless); })
                  .on('mouseover', mouseOn)
                  .on('mouseout', mouseOff)

   function mouseOn(data) {
     circles
      .attr('opacity', 0.5)
     d3.select(this)
      .attr('r', r(data.PercentHomeless) * 1.5)
      .style('opacity', 1)

     simulation
      .force('collide', d3.forceCollide((data) => { return r(data.PercentHomeless * 1.5) + 3; }))
   }

   function mouseOff(data) {
     d3.select(this)
      .attr('r', r(data.PercentHomeless))

     circles
      .attr('opacity', 1)

     simulation
      .force('collide', d3.forceCollide((data) => { return r(data.PercentHomeless) + 3; }))
   }

   let texts = svg.selectAll(null)
                .data(data)
                .enter()
                .append('text')
                .text((data) => { return data.State; } )
                .attr('color', 'black')
                .attr('font-size', 10)


    let ticked = () => {
      circles
        .attr('cx', (data) => { return data.x; })
        .attr('cy', (data) => { return data.y; })
      texts
        .attr('x', (data) => { return data.x; })
        .attr('y', (data) => { return data.y;  })
    };



    simulation.nodes(data)
      .on('tick', ticked)


  });

---

事实上，每次鼠标事件都有效。另一方面，在第一次鼠标事件之后，模拟已经冷却下来，这就是为什么在圆的位置上看不到任何修改

因此，您必须在

mouseOn

和

mouseOff

函数中重新加热模拟。例如：

simulation.alpha(0.8).restart();

这里是一个使用简化代码的演示（因为我无法访问您的数据）。将鼠标悬停在圆圈上：

var svg=d3.选择（“svg”）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var数据=d3.range（30.map）（d=>({
r:6
}));
var模拟=d3.力模拟（数据）
.力（“x”，d3.力x（150）.强度（0.05））
力量（“y”，d3。力量（75）。力量（0.05））
.力（“碰撞”，d3.力碰撞（功能（d）{
返回d.r+1；
}));
var circles=svg.selectAll（“.circles”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“r”，d=>d.r）
.attr（“填充”（d，i）=>颜色（i））；
圆圈。on（'mouseover'，mouseOn）
.on（'mouseout'，mouseOff）
模拟.节点（数据）
.on（“勾选”，d=>{
圆圈.attr（“cx”，d=>d.x）.attr（“cy”，d=>d.y）；
});
函数mouseOn（）{
圆形。属性（'opacity'，0.5）
d3.选择（本）
.attr（'r'，d=>d.r*1.5）；
模拟力（“碰撞”，d3。力碰撞（函数d）{
返回d.r*1.5+1；
}));
simulation.alpha（0.8）.restart（）；
}
函数mouseOff（）{
d3.选择（本）
.attr（'r'，d=>d.r.）；
圆圈.attr（'opacity'，1）；
模拟力（“碰撞”，d3。力碰撞（函数d）{
返回d.r+1；
}));
simulation.alpha（0.8）.restart（）；
}

我修复了不透明度问题，将.attr更改为.style，但仍在尝试解决forceCollide问题。由于您已经修复了不透明度，我将其从您的问题中删除。关于arrow函数：您是否在事件处理程序中看到此？这就是箭头函数在这里不起作用的原因。