D3.js CodeFlower Image as circle background

Void Published at Dev

void

I am using CodeFlower built upon D3.js. I want to show an image as a background instead of arbitrary colors, and i successfully did that using SVG Patterns.

DEMO FIDDLE

  // Enter any new nodes
  this.node.enter().append('defs')
        .append('pattern')
            .attr('id', function(d) { return (d.id+"-icon-img");}) // just create a unique id (id comes from the json)
            .attr('patternUnits', 'userSpaceOnUse')
            .attr('width', 80)
            .attr('height', 80)
            .append("svg:image")
                .attr("xlink:xlink:href", function(d) { return (d.icon);}) // "icon" is my image url. It comes from json too. The double xlink:xlink is a necessary hack (first "xlink:" is lost...).
                .attr("x", 0)
                .attr("y", 0)
                .attr("height", 80)
                .attr("width", 80)
                .attr("preserveAspectRatio", "xMinYMin slice");

  this.node.enter().append('svg:circle')
    .attr("class", "node CodeFlowerNode")
    .classed('directory', function(d) { return (d._children || d.children) ? 1 : 0; })
    .attr("r", function(d) { return d.children ? 3.5 : Math.pow(d.size, 2/5) || 1; })
    .style("fill", function(d) { return ("url(#"+d.id+"-icon-img)");})
    /* .style("fill", function color(d) {
      return "hsl(" + parseInt(360 / total * d.id, 10) + ",90%,70%)";
    })*/
    .call(this.force.drag)
    .on("click", this.click.bind(this))
    .on("mouseover", this.mouseover.bind(this))
    .on("mouseout", this.mouseout.bind(this));

The problem i am seeing is the image is not centrally aligned in the circle it is kind of tile layout composed of 4 images.

How can i make its position center and covering the circle nicely.

DEMO FIDDLE

Paul LeBeau

You need to change the way you define your pattern. You should define it with respect to the element it is being applied to. So leave patternUnits at the default of objectBoundingBox, and set the width and height to 1.

Then you need to also set the patternContentUnits to objectBoundingBox also, and give the <image> the same size (width and height of 1).

  this.node.enter().append('defs')
        .append('pattern')
            .attr('id', function(d) { return (d.id+"-icon");})  
            .attr('width', 1)
            .attr('height', 1)
            .attr('patternContentUnits', 'objectBoundingBox')
            .append("svg:image")
                .attr("xlink:xlink:href", function(d) { return (d.icon);})
                .attr("height", 1)
                .attr("width", 1)
                .attr("preserveAspectRatio", "xMinYMin slice");

Demo fiddle here

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-21

Comments

0 comments

From Dev

Related Related

Article

D3.js CodeFlower Image as circle background

D3.js CodeFlower Image as circle background

Image within circle object causes pixelation d3 js

d3.js display image as circle

d3 image in circle not rendering properly

How to Add Image to Circle Dynamically in D3js

Adding an image within a circle object in d3 javascript?

D3 conditionally append image OR circle element based on variable

d3: svg image in zoom circle packing

Dynamically place buttons where there is a circle on background image

Background image to SVG choropleth map using D3

Using D3 to fill an svg with a background image

How to add a background image to a plot created using D3

How to add a background image to a plot created using D3

how to draw circle with text in middle and an image as a background of the circle?

how to fill hexagon with background image in d3js?

D3.js Can not add background image to rectangle

Smart background div with circle but what if is background-image

circle with gradient background border and changing colors with js

How to get an non-overlapped circle packing d3 js chart?

How to get an non-overlapped circle packing d3 js chart?

D3/Raphael js draws 1000+ animated circle with slow fps

Change circle "start-stop" button background image on click in WPF

Draw Circle in the background of Text View, over each image in Fragment

Appending div to circle in d3.js

d3.js circle hover animation

Appending div to circle in d3.js

d3.js circle hover animation

Change div background image with JS

Fullpage.js Background Image

Style background image with JS not working