... .append("image") .attr("xlink:href", imgUrl) .attr("x", 0) .attr("y", 0) .attr("width", 1) .attr("height", 1) .attr('preserveAspectRatio', 'xMidYMid slice');
You can position and scale the image in the pattern using object viewport coordinates [0..1].
Note: xlink:href is deprecated, use href instead
The image is 768x512, that is 1.5:1. You then need to move the x coord of start drawing 0.25 to the left, so x=-0.25.
Using this method you can choose whatever part of the image you want to fill the pattern.
... .append("image") .attr("href", imgUrl) .attr("x", -0.25) .attr("y", 0) .attr("width", 1.5) .attr("height", 1);
- D3.js CodeFlower Image as circle background
- D3.js Can not add background image to rectangle
- image as circle background (d3.js svg)
- d3 image in circle not rendering properly
- Using D3.js fill node circle with a base64 jpeg image that is not a URL
- D3.js: How can I put an image on the background of a circle with the remaining parts trimmed and make it resize along with the circle onclick?
- Background image not applying to one div on Chrome for Mac
- Canvas.toDataURL() not showing background image of canvas
- data uri as background image of svg not converted to canvas on safari live site
- Not able to see the background image in svg rect
- Add image inside a circle D3
- Angular 4 + D3v4 : dragging circle not working correctly in conjunction with zooming
- d3 circle onclick event not firing
- Circle points are not aligned with area shape
- How to not preserve aspect ratio when resizing an image in d3.js
- Using D3 to fill an svg with a background image
- circle radius not updating on transition in d3
- Fisheye effect D3js image slideshow works on rects/objects but not image files, Error: <image> attribute x: Expected length, "NaN"
- Why are cross-origin Image requests blocked by Cytoscape.js but not by d3.js?
- d3js force layout dynamically adding image or circle for each node
- SVG image in rect or circle show as black
- Image onLoad event is not triggered using Chrome on iOS
- d3 image on top of node / circle doesn't work with clipPath
More Query from same tag
- Using Drop-down menu with D3 force layout graph
- D3js gauge graph
- D3 Time Axis in a specific time zone
- D3 Not Displaying SVG Text Element
- d3: Multi-Foci Force key code component understanding
- C3 line chart: compress or break interval between distant points
- Missing data after adding the time range
- LatLong falls within a given polygon in D3 + Leaflet
- Display text on a pie in Pie Charts using d3 at two places
- how to display bottom data for row chart using dc.js
- rMaps ichoropleth with custom map/shp
- D3 forced layout zoom and pan not working
- Strange error in chromium during development
- Create a D3 axis without tick labels
- Is D3js v5 backwards compatible with v4?
- D3 chart is duplicating on React.js component
- D3.js: Import file changing with a slider
- D3 - align leftmost side of circle to x-axis time scale
- Variable scope in d3 when callback is an event function
- Trying to user scatterplots in a d3 chart with brush/zoom
- Text tag not displaying properly in D3 SVG
- How to force d3js to take hours into account when x axis is created?
- Cannot get treemap to render with new JSON data
- d3js multi-line graph to iterate multiple nested arrays with multiple nested objects
- replace tag with with a different dom element using d3.js
- Tooltip NVD3 AreaStackChart
- Can d3.js graph put inside a table?
- Bubble highlight feature in d3js bubble chart
- DC.js: Unable to make the line plot in decreasing order
- How to generate JSON from a pandas data frame for dynamic d3.js tree