d3js基本javascript&；css：如何将字符串数组（用于图像URL）应用于现有条形图？

[D3JS]

所以我试着做一个平方条形图，它与数据的大小成正比，每个数据都有一个特定的图像

    <style type="text/css">
        div.bar {
            display: inline-block;
            width: 20px;
            height: 75px;   /* Gets overriden by D3-assigned height below */
            margin-right: 2px;
            background-image: url('http://4.bp.blogspot.com/-HWtqJNu3blk/UOhy_vj2I3I/AAAAAAAAhdY/U-krgiDfksw/s640/sydney+australia+rubber+duck+1.jpg');
            background-size: 100%;}
    </style>
        <script type="text/javascript"> 
            var dataset = [ 25, 7, 5];
            var coverset=['http://4.bp.blogspot.com/-HWtqJNu3blk/UOhy_vj2I3I/AAAAAAAAhdY/U-krgiDfksw/s640/sydney+australia+rubber+duck+1.jpg', 
            'http://fora.mtv.ca/wp-content/uploads/2012/09/catsofinstagram.jpg',
'http://www.dogbreedinfo.com/images22/NorthernInuitDogWhiteThunder10Months.jpg',
            ]
            var bar = d3.select("body").selectAll("div")
                .data(dataset)
                .enter()
                .append("div")
                .attr("class", "bar")
                .style("height", function(d) {
                    var barHeight = d * 5;
                    return barHeight + "px";
                })
                .style("width", function(d) {
                    var barWidth = d * 5;
                    return barWidth + "px";
                });
            var img = d3.select("body").selectAll("div")
                .data(coverset)
                .enter()
                .append("div")
                .attr("class", "bar")
                .style("background-img", function(d){
                    return "url(" + d +")";
                });

        </script>

酒吧{
显示：内联块；
宽度：20px；
高度：75px；/*被下面D3指定的高度覆盖*/
右边距：2px；
背景图像：url（'http://4.bp.blogspot.com/-HWtqJNu3blk/UOhy_vj2I3I/AAAAAAAAhdY/U-krgiDfksw/s640/sydney+澳大利亚+橡胶+鸭子+1.jpg'）；
背景大小：100%；}
var数据集=[25,7,5]；
var coverset=['http://4.bp.blogspot.com/-HWtqJNu3blk/UOhy_vj2I3I/AAAAAAAAhdY/U-krgiDfksw/s640/sydney+澳大利亚+橡胶+鸭子+1.jpg'，
'http://fora.mtv.ca/wp-content/uploads/2012/09/catsofinstagram.jpg',
'http://www.dogbreedinfo.com/images22/NorthernInuitDogWhiteThunder10Months.jpg',
]
var bar=d3.选择（“主体”）.选择全部（“div”）
.数据（数据集）
.输入（）
.附加（“div”）
.attr（“类”、“条”）
.样式（“高度”，功能（d）{
var barHeight=d*5；
返回杆高度+“px”；
})
.样式（“宽度”，功能（d）{
var barWidth=d*5；
返回条宽度+“px”；
});
var img=d3.选择（“主体”）.选择全部（“div”）
.资料（封面套）
.输入（）
.附加（“div”）
.attr（“类”、“条”）
.样式（“背景图像”，功能（d）{
返回“url（“+d+”）；
});

有了这个代码，我就得到了。 所以我的代码有一半在工作，条形图与每个基准的大小成比例，但是， 每个条应具有“coverset”中指定的不同图像，但它仅显示默认的黄色鸭子图片，不被D3指定的图像覆盖

有人能指出我在代码的图像部分做错了什么吗？

---

谢谢

这里有一种方法可以实现你的目标 （发布在jsbin上的代码示例的修订版本）

CSS

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* Gets overriden by D3-assigned height below */
    margin-right: 2px;
    background-image: url('http://4.bp.blogspot.com/-HWtqJNu3blk/UOhy_vj2I3I/AAAAAAAAhdY/U-krgiDfksw/s640/sydney+australia+rubber+duck+1.jpg');

    /* https://developer.mozilla.org/en-US/docs/Web/CSS/background-size */
    background-size: cover;
    background-repeat: no-repeat;
  }

            var dataset = [ 25, 7, 5];
            var coverset=['http://4.bp.blogspot.com/-HWtqJNu3blk/UOhy_vj2I3I/AAAAAAAAhdY/U-krgiDfksw/s640/sydney+australia+rubber+duck+1.jpg', 
            'http://fora.mtv.ca/wp-content/uploads/2012/09/catsofinstagram.jpg',
'http://www.dogbreedinfo.com/images22/NorthernInuitDogWhiteThunder10Months.jpg',
            ]
            var bar = d3.select("body").selectAll("div")
                .data(dataset)
                .enter()
                .append("div")
                .attr("class", "bar")
                .style("height", function(d) {
                    var barHeight = d * 5;
                    return barHeight + "px";
                })
                .style("width", function(d) {
                    var barWidth = d * 5;
                    return barWidth + "px";
                })
               //  "background-image", not "background-img"
               //  using "i" for index 
               .style("background-image", function(d, i){
                    return "url(" + coverset[i] +")";
                });

JavaScript

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* Gets overriden by D3-assigned height below */
    margin-right: 2px;
    background-image: url('http://4.bp.blogspot.com/-HWtqJNu3blk/UOhy_vj2I3I/AAAAAAAAhdY/U-krgiDfksw/s640/sydney+australia+rubber+duck+1.jpg');

    /* https://developer.mozilla.org/en-US/docs/Web/CSS/background-size */
    background-size: cover;
    background-repeat: no-repeat;
  }

            var dataset = [ 25, 7, 5];
            var coverset=['http://4.bp.blogspot.com/-HWtqJNu3blk/UOhy_vj2I3I/AAAAAAAAhdY/U-krgiDfksw/s640/sydney+australia+rubber+duck+1.jpg', 
            'http://fora.mtv.ca/wp-content/uploads/2012/09/catsofinstagram.jpg',
'http://www.dogbreedinfo.com/images22/NorthernInuitDogWhiteThunder10Months.jpg',
            ]
            var bar = d3.select("body").selectAll("div")
                .data(dataset)
                .enter()
                .append("div")
                .attr("class", "bar")
                .style("height", function(d) {
                    var barHeight = d * 5;
                    return barHeight + "px";
                })
                .style("width", function(d) {
                    var barWidth = d * 5;
                    return barWidth + "px";
                })
               //  "background-image", not "background-img"
               //  using "i" for index 
               .style("background-image", function(d, i){
                    return "url(" + coverset[i] +")";
                });