D3-将背景填充添加到矩形 [英] D3 - Add background fill to rect
本文介绍了D3-将背景填充添加到矩形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以向rect元素添加背景填充?我正在使用rect元素创建条形图.每个矩形元素都有一个宽度和填充集.我想用一种颜色填充剩余的宽度.
Is it possible to add a background fill to a rect element? I am using rect elements to create a bar graph. Each rect element has a width and fill set. I want to fill the remaining width with a color.
See here: http://codepen.io/jesouhaite08/pen/fhvzA
谢谢!
推荐答案
为获得最大的灵活性,我将使用其他矩形为您的栏绘制背景,请查看分叉的示例:
For best flexibility I would use other rectangles to draw the background for your bars, check the forked example: http://codepen.io/anon/pen/JnlAE
// Bars
svg_fun.selectAll('rect.background')
.data(dataset)
.enter()
.append('rect')
.classed('background', true)
.attr('y', function(d, i) {return i * h_line; })
.attr('x', 0)
.attr('height', 20)
.attr('width', function(d) {return scale_x(max_x);} )
.attr('fill', 'red')
svg_fun.selectAll('rect.bar')
.data(dataset)
.enter()
.append('rect')
.classed('bar', true)
.attr('y', function(d, i) {return i * h_line; })
.attr('x', 0)
.attr('height', 20)
.attr('width', function(d) {return scale_x(d);} )
.attr('fill', 'teal')
这篇关于D3-将背景填充添加到矩形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文