d3.js - filling `image` from pattern shrinks the image size

Question

shrinked image I created a circle. i would like to fill the circle with one of my circled image. for this i created a patter and appended a image in it.

after i fill the pattern, the image is not the right size here. what is the issue? any one correct me please?

or any one show me the correct way to fill the image to a circle?

i commented the information along the code for details:

patterns : function () {

        this.svgElement
            .append('pattern')
                .attr({
                    id:'progImage',
                    width:180,
                    height:88,
                    x:0,
                    y:0
                })
            .append('image')
                .attr({
                    x:0,
                    y:0,
                    width:180, //width
                    height:88, //height of image
                    'xlink:href':"images/programme_up.png" //image
                });

    },

    createSvg : function () {
        var that = this;
        this.svgElement = d3.select(this.container)
            .append('svg')
            .attr({
                id:'dashBoard',
                width:this.svgWidth,
                height:this.svgHeight,
                'perserveAspectRatio' :'xMinYMin none',
                viewBox:"0 0 "+this.svgWidth+" "+this.svgHeight
        });
    },

    dashBoard : function () {
        this.svgElement
            .append('circle')
            .attr({
                r: 135,
                cx:this.svgWidth/2,
                cy:this.svgHeight/3,
                fill:'url(#progImage)', //filling here. but the bg is very small..why
                stroke:'white',
                'stroke-width':1
            });
    }

UPDATE

Actually i require this should be my output:

What i require

What's the rendered HTML? and why are you using that javascript library? this is simple SVG stuff. — odedta, May 31 '15 at 12:17
But around the circle i require to wrap text, is it possible? — 3gwebtrain, May 31 '15 at 12:50
Can you look my `update` on my question. can you show me the correct way to reproduce that? a) adding image to circle, b) adding text to cirlce c) adding events to circle. — 3gwebtrain, May 31 '15 at 12:54

score 1 · Accepted Answer · answered May 31 '15 at 13:15

1

http://jsfiddle.net/j2sqknsf/2/ - You can get this done much simpler using just CSS...

If you want to add events to the circle use jQuery:

$('svg').on('YOUR_EVENT',function() {

});

answered May 31 '15 at 13:15

odedta

2,430
4
24
51

How to wrap the text around the circle. can you look my update on my question? – 3gwebtrain May 31 '15 at 13:27
This explains is far better than I could: https://css-tricks.com/set-text-on-a-circle/ – odedta May 31 '15 at 13:50

d3.js - filling `image` from pattern shrinks the image size

1 Answers1