d3js：在 d3js 气泡图上应用过渡

Question

我有一个气泡图，我在其中按以下方式制作气泡：

var circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", width / 2)
  .attr("cy", height / 2)
  .attr("opacity", 0.3)
  .attr("r", 20)
  .style("fill", "blue")
  .attr("cx", function(d) {
    return xscale(+d.admit_probability);
  })
  .attr("cy", function(d) {
    return yscale(+d.rank);
  })
  .on('mouseover', function(d, i) {
    d3.select(this)
      .attr("r", 32)
      .style("fill", "orange")
      .style("cursor", "pointer")
      .attr("text-anchor", "middle");

    texts.filter(function(e) {
        return e.rank === d.rank;
      })
      .attr("font-size", "20px")
  })
  .on('mouseout', function(d, i) {
    d3.select(this).transition()
      .style("opacity", 0.3)
      .attr("r", 20)
      .style("fill", "blue")
      .style("cursor", "default");
    texts.filter(function(e) {
        return e.rank === d.rank;
      }).attr("font-size", "10px")
  });

我尝试了应用转换的不同组合，例如：

circles.transition().ease(d3.easeLinear);
circles.transition().ease("bounce");
circles.transition().ease("elastic");

但似乎没有一个主题有效。我不明白如何给气泡添加弹性效果。

Answer 1

如果你想要有弹性的效果，应该是：

.ease(d3.easeBounce)

这是您的更改代码：

var margin = 40,
  width = 600,
  height = 400;

var data = [{
  "admit_probability": 54,
  "rank": 20,
  "c": 12
}, {
  "admit_probability": 79,
  "rank": 111,
  "c": 9
}, {
  "admit_probability": 70,
  "rank": 68,
  "c": 6
}, {
  "admit_probability": 12,
  "rank": 1,
  "c": 20
}, {
  "admit_probability": 197,
  "rank": 87,
  "c": 10
}];

var xscale = d3.scaleLinear()
  .domain(
    d3.extent(data, function(d) {
      return +d.admit_probability;
    })
  )
  .nice()
  .range([0, width]);

var yscale = d3.scaleLinear()
  .domain(d3.extent(data, function(d) {
    return +d.rank;
  }))
  .nice()
  .range([height, 0]);

var xAxis = d3.axisBottom().scale(xscale);

var yAxis = d3.axisLeft().scale(yscale);

var svg = d3.select('body')
  .append('svg')
  .attr('class', 'chart')
  .attr("width", width + margin + margin)
  .attr("height", height + margin + margin)
  .append("g")
  .attr("transform", "translate(" + margin + "," + margin + ")");

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", width / 2)
  .attr("cy", height / 2)
  .attr("opacity", 0.3)
  .attr("r", 20)
  .style("fill", "blue")
  .attr("cx", function(d) {
    return xscale(+d.admit_probability);
  })
  .attr("cy", function(d) {
    return yscale(+d.rank);
  })
  .on('mouseover', function(d, i) {
    d3.select(this).transition()
      .duration(1000)
      .ease(d3.easeBounce)
      .attr("r", 32)
      .style("fill", "orange");

    texts.filter(function(e) {
        return e.rank === d.rank;
      }).transition()
      .duration(1000)
      .ease(d3.easeBounce)
      .attr("font-size", "20px")
  })
  .on('mouseout', function(d, i) {
    d3.select(this).transition()
      .style("opacity", 0.3)
      .attr("r", 20)
      .style("fill", "blue");
    texts.filter(function(e) {
      return e.rank === d.rank;
    }).attr("font-size", "10px")
  })
  // .ease("elastic");

var texts = svg.selectAll(null)
  .data(data)
  .enter()
  .append('text')
  .attr("x", function(d) {
    return xscale(+d.admit_probability);
  })
  .attr("text-anchor", "middle")
  .attr("y", function(d) {
    return yscale(+d.rank);
  })
  .text("Hi")
  .attr("pointer-events", "none")
  .attr("font-family", "sans-serif")
  .attr("font-size", "10px")
  .attr("fill", "red");

svg.append("text")
  .attr("transform", "translate(" + (width / 2) + " ," + (height + margin) + ")")
  .style("text-anchor", "middle")
  .text("Average Acceptance");

svg.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - margin)
  .attr("x", 0 - (height / 2))
  .attr("dy", "1em")
  .style("text-anchor", "middle")
  .text("Rank");

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

编辑：根据您下面的 cmets，这就是您可以将过渡应用于所有圆圈的方式：

var margin = 40,
  width = 600,
  height = 400;

var data = [{
  "admit_probability": 54,
  "rank": 20,
  "c": 12
}, {
  "admit_probability": 79,
  "rank": 111,
  "c": 9
}, {
  "admit_probability": 70,
  "rank": 68,
  "c": 6
}, {
  "admit_probability": 12,
  "rank": 1,
  "c": 20
}, {
  "admit_probability": 197,
  "rank": 87,
  "c": 10
}];

var xscale = d3.scaleLinear()
  .domain(
    d3.extent(data, function(d) {
      return +d.admit_probability;
    })
  )
  .nice()
  .range([0, width]);

var yscale = d3.scaleLinear()
  .domain(d3.extent(data, function(d) {
    return +d.rank;
  }))
  .nice()
  .range([height, 0]);

var xAxis = d3.axisBottom().scale(xscale);

var yAxis = d3.axisLeft().scale(yscale);

var svg = d3.select('body')
  .append('svg')
  .attr('class', 'chart')
  .attr("width", width + margin + margin)
  .attr("height", height + margin + margin)
  .append("g")
  .attr("transform", "translate(" + margin + "," + margin + ")");

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", width / 2)
  .attr("cy", height / 2)
  .attr("opacity", 0.3)
  .attr("r", 20)
  .style("fill", "blue")
  .attr("cx", function(d) {
    return xscale(+d.admit_probability);
  })
  .attr("cy", function(d) {
    return yscale(+d.rank);
  })
  .on('mouseover', function(d, i) {
    circles.transition()
      .duration(1000)
      .ease(d3.easeBounce)
      .attr("r", 32)
      .style("fill", "orange");

    texts.transition()
      .duration(1000)
      .ease(d3.easeBounce)
      .attr("font-size", "20px")
  })
  .on('mouseout', function(d, i) {
    circles.transition()
      .style("opacity", 0.3)
      .attr("r", 20)
      .style("fill", "blue");
    texts.transition()
    .attr("font-size", "10px")
  })
  // .ease("elastic");

var texts = svg.selectAll(null)
  .data(data)
  .enter()
  .append('text')
  .attr("x", function(d) {
    return xscale(+d.admit_probability);
  })
  .attr("text-anchor", "middle")
  .attr("y", function(d) {
    return yscale(+d.rank);
  })
  .text("Hi")
  .attr("pointer-events", "none")
  .attr("font-family", "sans-serif")
  .attr("font-size", "10px")
  .attr("fill", "red");

svg.append("text")
  .attr("transform", "translate(" + (width / 2) + " ," + (height + margin) + ")")
  .style("text-anchor", "middle")
  .text("Average Acceptance");

svg.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - margin)
  .attr("x", 0 - (height / 2))
  .attr("dy", "1em")
  .style("text-anchor", "middle")
  .text("Rank");

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