0

[D3JS]

So what I've tried to do is to make a squared bar chart that's proportional to the size of the data, along with each datum to be assigned with a particular image to be shown. 

    <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>

With this code, I get this. So half of my code is working, the bar is proportional to the size of each datum, however, each bar should have different images as specified in the "coverset", but it only shows a default yellow duck picture, not getting overridden by the D3-assigned image.

Can someone point out what I'm doing wrong in the image part of the code? Thanks!

4

1 回答 1

0

这是实现目标的一种方法（在 jsbin 上发布的代码示例的修订版）。

http://jsbin.com/ocoyal/1/edit

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;
  }

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";
                })
               //  "background-image", not "background-img"
               //  using "i" for index 
               .style("background-image", function(d, i){
                    return "url(" + coverset[i] +")";
                });
于 2013-06-10T22:21:40.547 回答