Question

d3的新手。我的mouseover和mouseout事件处理程序有点麻烦。

当使用forceCollide函数选择圆圈时，我希望将圆圈分开。这工作一次然后圆圈将保持mouseout或mouseover forceCollide值而不返回其原始状态。

对于我做错的任何方向表示赞赏。

当我参与其中时，如果我用ES6语法编写它们，我也无法使用鼠标悬停功能，任何帮助都会很好，但这可能是另一个问题。

我在下面粘贴了我的代码。

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)


  });

Answer 1

实际上，鼠标事件每次都有效。另一方面，模拟在第一次鼠标事件之后已经冷却，这就是为什么你没有看到圆圈中的任何修改的原因＆＃39;位置。

因此，您必须在mouseOn和mouseOff函数中重新模拟模拟。例如：

simulation.alpha(0.8).restart();

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

＆＃13;

var svg = d3.select("svg");

var colour = d3.scaleOrdinal(d3.schemeCategory10);

var data = d3.range(30).map(d => ({
  r: 6
}));

var simulation = d3.forceSimulation(data)
  .force("x", d3.forceX(150).strength(0.05))
  .force("y", d3.forceY(75).strength(0.05))
  .force("collide", d3.forceCollide(function(d) {
    return d.r + 1;
  }));

var circles = svg.selectAll(".circles")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", d => d.r)
  .attr("fill", (d, i) => colour(i));

circles.on('mouseover', mouseOn)
  .on('mouseout', mouseOff)

simulation.nodes(data)
  .on("tick", d => {
    circles.attr("cx", d => d.x).attr("cy", d => d.y);
  });

function mouseOn() {
  circles.attr('opacity', 0.5)
  d3.select(this)
    .attr('r', d => d.r * 1.5);

  simulation.force("collide", d3.forceCollide(function(d) {
    return d.r * 1.5 + 1;
  }));

  simulation.alpha(0.8).restart();
}

function mouseOff() {
  d3.select(this)
    .attr('r', d => d.r);

  circles.attr('opacity', 1);

  simulation.force("collide", d3.forceCollide(function(d) {
    return d.r + 1;
  }));

  simulation.alpha(0.8).restart();


}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

＆＃13;

PS：您不需要将data传递给mouseOn和mouseOff个功能。

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

1 个答案: