rect .transition() .delay((d, i) => (resize ? 0 : i * 10)) .attr('x', d => x(d.data.x)) .attr('y', d => y(d[1])) .attr('width', x.bandwidth()) .attr('height', d => y(d[0]) - y(d[1]))
rect .transition() .duration(500) // .delay((d, i) => i * 10) .attr('x', function(d, i) { let layerIndex = this.parentNode.__data__.index return x(d.data.x) + x.bandwidth() / n * layerIndex }) .attr('width', x.bandwidth() / n) .transition() .attr('y', d => y(d[1] - d[0])) .attr('height', d => graphHeight - y(d[1] - d[0]))
rect .enter() .append('rect') .attr('class', d => `data data-${d.data.x}`) .attr('x', d => x(d.data.x)) .attr('y', graphHeight) .attr('width', x.bandwidth()) .attr('height', 0) .on('mouseover', d => { clearTimeout(this.unsetHoverTimeout) setHover(d.data.x) }) .on('mouseout', d => { this.unsetHoverTimeout = setTimeout(() => setHover(null), 200) }) .merge(rect)
<rect key={i} x={xScale(obj.data.day) - 15} y={yScale(obj[1])} width="30"
const x = xScale(xAccessor(value.data)); const y = yScale(value[1]); const barHeight = Math.abs(yScale(value[0]) - y);
<Rect key={j} x={x(d.data.index)} y={y(d[1])} height={y(d[0]) - y(d[1])}
rect .transition() .delay((d, i) => (resize ? 0 : i * 10)) .attr('x', function(d, i) { let layerIndex = this.parentNode.__data__.index return x(d.data.x) + x.bandwidth() / n * layerIndex }) .attr('y', d => y(d[1] - d[0])) .attr('width', x.bandwidth() / n) .attr('height', d => graphHeight - y(d[1] - d[0]))
rect .transition() .duration(500) // .delay((d, i) => i * 10) .attr('y', d => y(d[1])) .attr('height', d => y(d[0]) - y(d[1])) .transition() .attr('x', d => x(d.data.x)) .attr('width', x.bandwidth())
<Rect key={j} x={x(d.data.index)} y={y(d[1])} height={y(d[0]) - y(d[1])}