D3 - 为矩形添加背景填充

【问题标题】：D3 - Add background fill to rectD3 - 为矩形添加背景填充
【发布时间】：2014-10-23 18:42:06
【问题描述】：

是否可以为矩形元素添加背景填充？我正在使用 rect 元素来创建条形图。每个矩形元素都有一个宽度和填充集。我想用颜色填充剩余的宽度。

See here: http://codepen.io/jesouhaite08/pen/fhvzA

谢谢！

【问题讨论】：

.attr("fill", "colour")?
我已经使用了一个填充。如果矩形的 60% 用蓝色填充，我想用另一种颜色填充剩余的 40%。
啊，对 - 使用带有硬停止的gradient。
嗯，这是唯一的方法吗？我试图避免这种情况，因为我在绘制矩形后动态创建填充颜色。

标签： d3.js

【解决方案1】：

为了获得最佳灵活性，我会使用其他矩形来为您的条形图绘制背景，请查看分叉示例：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')

【讨论】：

你太棒了！谢谢！