score:0
you need to add the image with the original height of the letter png, and then use the transformation translate
to move it into place, and scale
to stretch it.
a good explanation can be found here.
here's a very basic example:
var svg = d3.selectall("body").append("svg")
.attr("height",600)
.attr("width",600)
svg.append("svg:image")
.attr("xlink:href", "https://encrypted.google.com/intl/en_all/images/logos/images_logo_lg.gif")
.attr("width", 200)
.attr("height", 100)
svg.append("svg:image")
.attr("xlink:href", "https://encrypted.google.com/intl/en_all/images/logos/images_logo_lg.gif")
.attr("width", 200)
.attr("height", 100)
.attr("transform", "translate(0,100) scale(1,2)")
i'm not sure that images is a better solution .. depending on how much they're stretched, they might become distorted. fonts, on the other hand, should hold their sharpness.
Source: stackoverflow.com
Related Query
- Drawing sequence logos in D3
- Follow up: drawing-sequence-logos-in-d3 using images
- D3.js: Using images (with filenames specified in data) as tick values on axis
- Compilation errors when drawing a piechart using d3.js and TypeScript
- Drawing A square Matrix using D3.js
- How to animate drawing a sequence of line segments
- drawing SVG polylines in a loop using javascript
- d3js - the path is not drawing full values while using `defined`
- How can I add images in the nodes of a D3 Sankey diagram, using the rcv and networkD3 packages in R?
- How to follow a symbolic link using javascript?
- Drawing a sector of sunburst diagram using d3.js
- Using generic function for drawing line d3js
- how to start drawing a line with a space between y-axis and it using d3js
- Looping through a set of images using D3js
- Create synchronous loading of data using D3.js and drawing following the loading
- Insert images into dendogram's leaves using d3.js
- drawing d3.svg.arc element using data stored in array in d3.js
- Drawing multiple circles with text in them using d3.js
- d3: drawing multiple rectangles using areas
- Drawing a simple graph using projected lines
- Drawing a line using d3 is not visible when all data items are the same
- Ellipse drawing By using arc in d3
- d3.js Force Directed Graph - Using Images instead of Circles for the Nodes
- Drawing SVG images with an array of images.
- Drawing a simple chart using D3 and C3
- Can we add images in json data file and call it on page using D3.js
- How to append multiple images in SVG using javascript?
- Compilation errors when drawing a piechart using D3.js, TypeScript and Angular
- Drawing multipe items in svg g elements using d3
- Color code LineString drawing using D3.js
More Query from same tag
- 'Circle' is not coming for line in D3 Chart
- Why does my angular component ignore my css file?
- Data input format for heatmaps
- Inhibit mouse interactions for certain svg child elements
- Dimple TooltipText EventHandler Issue
- d3 add text to SVG rect
- How do I group the nodes in a force directed graph
- Add a custom tick / marker for d3.time.scale() in a dc.js seriesChart
- selection.exit().remove() method does not do overwriting or deletion
- How to get data labels to show in D3 stacked bar chart?
- d3js stack chart with simple data
- Correct way to update values for animations
- d3 - xScale not updating?
- Is this correct json syntax?
- Why do I get a "Uncaught TypeError" when I introduce a D3 .transition()?
- Why is d3 pack layout crashing unexpectedly?
- Fading chords in d3js chord graph
- Token Error in Makefile for D3js
- Data view mapping in Power BI visuals
- Updating SVG Element Z-Index With D3
- AngularJS data-binding with DOM not working while using D3js
- d3 transition circles to a json data value
- Prevent crossing of arrows in dagre-d3
- Scaling a SVG rectangle position based on data
- How do you find the distance while drawing line on mouse vertical axis or horizontal?
- Changing CSV data source based on input range
- How to display D3 Color legend horizontally and not vertically
- Explain d3js projection fundamentals
- D3 exit mutli-series line chart labels on transition
- Why D3 is not creating svg elements