我试图让所有的条在鼠标悬停时淡出,除了我的光标在上面的那个--那是我想通过保持完全不透明来突出显示的那个。到目前为止,我已经能够让所有的条在鼠标悬停时淡出,在鼠标退出时恢复。下面是代码。也许过滤器功能不起作用?
谢谢你,谢谢
const filmPermits = await d3.json(
'https://data.cityofnewyork.us/resource/tg4x-b46p.json',
);
const byZipCode = d3.rollup(
filmPermits,
(v) => v.length,
(d) => d['zipcode_s'],
);
const WIDTH = 1400;
const HEIGHT = 600;
const svg = app.append('svg');
// svg.style('border', '1px solid red');
svg.style('background', '#FCF9F5');
svg.attr('width', WIDTH);
svg.attr('height', HEIGHT + 100);
svg.attr('viewBox', `0 0 ${WIDTH} ${HEIGHT}`);
const x_scale = d3
.scaleBand()
.domain(Array.from(byZipCode.keys()))
// {11217, 10013, 10014, 11222, ...}
.range([0, WIDTH]);
const largestValue = d3.max(Array.from(byZipCode.values()));
const y_scale = d3.scaleLinear().domain([0, largestValue]).range([0, HEIGHT]);
var colorScale = d3
.scaleOrdinal()
.domain(Array.from(byZipCode.keys()))
.range(['#7A3E65', '#A84448', '#E9A178']);
const bars = svg
.selectAll('rect')
.data(byZipCode)
.join('rect')
// d looks like ['Brooklyn', 10]
.attr('x', (d) => x_scale(d[0]))
.attr('y', (d) => HEIGHT - y_scale(d[1]))
.attr('width', () => x_scale.bandwidth())
.attr('height', (d) => y_scale(d[1]))
.attr('fill', (d) => colorScale(d[0]))
.on('mouseover', function (d) {
// make all bars semi-opaque
fade(0.2, d);
})
.on('mouseout', function (d) {
fade(1, d);
});
const text = svg
.selectAll('text')
.data(byZipCode)
.enter()
.append('text')
.text((item) => {
return item + ' times';
})
.attr('x', (d) => x_scale(d[0]))
.attr('y', (d) => HEIGHT - y_scale(d[1]) - 10)
.style('font-family', 'Monospace')
.attr('fill', (d) => colorScale(d[0]))
.on('mouseover', function (d) {
// make all bars semi-opaque
fade(0.2, d);
})
.on('mouseout', function (d) {
fade(1, d);
});
// function fade(opacity, d) {
// d3.selectAll('rect')
// .filter(function (e) {
// return e !== d;
// })
// .transition()
// .style('opacity', opacity);
// d3.selectAll('text')
// .filter(function (e) {
// return e !== d;
// })
// .transition()
// .style('opacity', opacity);
// }
function fade(opacity, selectedBar) {
d3.selectAll('rect')
.filter(function (d, i) {
return selectedBar !== d && selectedBar.x !== d.x;
})
.transition()
.style('opacity', opacity);
d3.selectAll('text')
.filter(function (d, i) {
return selectedBar !== d && selectedBar.x !== d.x;
})
.transition()
.style('opacity', opacity);
}
字符串
使用这个来帮助我让mouseover和mouseout正常工作:
Fade bars in a stack diagram on mouseover
1条答案
按热度按时间fumotvh31#
有更好的方法可以做到这一点,特别是避免每次触发事件时都使用
d3.selectAll
,但让我们只关注您的问题:您的数据不是基元,因此不能进行
selectedBar !== d
这样的比较。此外,您似乎没有在数据中使用x
属性。因此,选择一个唯一值(x刻度所使用的值),您的过滤器应该是:字符串