我有一个气泡车,里面包含了一些圆形和文本。在检查图表时,我得到了如下的结果:
。问题是我所应用的动画只作用于圆形上。我希望能够将圆形和文字整合在一起,并对每个组应用动画效果。正如我所指定的,有两种事件:mouseover 和 mouseout。我希望它们能同时作用于圆形和圆形内的文本。我的脚本如下:
![inspect](https://istack.dev59.com/0HTkP.webp)
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('.chart')
.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);
svg.selectAll("circle")
.data(data)
.enter()
.insert("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("opacity", 0.3)
.attr("r", 20)
.style("fill", "blue")
.on('mouseover', function (d, i) {
d3.select(this)
.attr("r", 32)
.style("fill", "orange");
})
.on('mouseout', function (d, i) {
fadeOut();
})
.attr("cx", function (d) { return xscale(+d.admit_probability); })
.attr("cy", function (d) { return yscale(+d.rank); });
// .ease("elastic");
var text = svg.selectAll(null)
.data(data)
.enter()
.append('text');
var textLabels = 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("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");
function fadeOut() {
svg.selectAll("circle")
.transition()
.style("opacity", 0.3)
.attr("r", 20)
.style("fill", "blue");
}
我该如何做到这一点?