1
我有一张条形图,我想在每个栏的右上角添加一个圆形的红色x以显示用户可以删除特定的栏,但我无法弄清楚如何添加这个。这就是我喜欢的最终形象,但也重复其他四个栏。 在svg图表上添加div(D3.js)
我已经提供了一个jsfiddle和JS代码,除了没有红色的x之外,我做了其他所有我喜欢的图形。
// graph variables
var xScale ,
yScale ,
xAxis ,
yAxis ;
// chart dimensions
var margin = { top: 20, right: 30, bottom: 20, left: 70 },
width = $('#chart').width() - margin.left - margin.right,
height = $(window).height()/3.5 - margin.top - margin.bottom;
// color palette for graph
var colors = [ '#4398B5', '#ADC4CC', '#92B06A', '#E09D2A', '#DE5F32' ];
var data = [
{ id : 1, value : 100},
{ id : 2, value : 200},
{ id : 3, value : 300},
{ id : 4, value : 400},
{ id : 5, value : 500}
];
// svg object for graph
var svg;
xScale = d3.scaleBand()
.domain(d3.range(data.length))
.range([ 0, width ])
.padding(0.1);
var yMax = d3.max(data, function(d) {
return d.value;
});
yScale = d3.scaleLinear()
.domain([ 0, yMax ])
.range([ height, 0 ]);
xAxis = d3.axisBottom(xScale);
yAxis = d3.axisLeft(yScale);
var yTicks = yAxis.ticks(5),
yTicksFormat = yAxis.tickFormat(d3.format('$,'));
svg = d3.select('#chart svg')
.attr('viewBox', '0 0 ' + (width + margin.left + margin.right) + ' ' + (height + margin.top + margin.bottom))
.attr('height', (height + 'px'))
.attr('width', '100%')
.attr('preserveAspectRatio', 'none')
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', function (d, i) {
return xScale(i);
})
.attr('y', function(d, i) {
return yScale(0);
})
.attr('height', function(d) {
return height - yScale(0);
})
.attr('width', xScale.bandwidth())
.attr('fill', function(d, i) {
return colors[ i ];
})
.transition()
.duration(1500)
.attr('y', function(d, i) {
return yScale(d.value);
})
.attr('height', function(d) {
return height - yScale(d.value);
})
.on('end', function(d, i) {
/*Insert this button somewhere
<button type="button" class="btn btn-default btn-circle btn-danger"><i class="glyphicon glyphicon-remove"></i></button>*/
});
svg.append('g')
.attr('class', 'yAxis')
.attr('transform', 'translate(0, ' + (-1) + ')')
.call(yAxis);
我猜每个酒吧.on('end', function...)
函数被调用后插入红色的X。
实际红色的X本身就
<button type="button" class="btn btn-default btn-circle btn-danger"><i class="glyphicon glyphicon-remove"></i></button>*/
并为它的CSS将
.btn-circle {
width: 19px;
height: 19px;
text-align: center;
padding: 1px 0;
font-size: 13px;
line-height: 0.1;
border-radius: 30px;
}
这是在提供的jsfiddle。任何帮助将不胜感激。
谢谢!
你需要X与酒吧一起成长吗?或只出现在动画的结尾? – Varin
对不起,应该提到我认为没关系,只要图标在右上角出现,图标就保持不变。如果我确实希望它增长,我想我可以把它放在一个响应式div中,并且没问题,但我不确定。 – ans
我的意思是 - 你需要为它们设置动画 - 用小节提高,出现在SVG加载结束时,还是不断地在那里? – Varin