javascript-d3How do I use the tspan element in D3.js?
The tspan
element in D3.js is used to break text into multiple lines or to set the position of a text element. It can be used to control the styling of the text by setting the font size, font family, font weight, and other properties.
For example, to set the font size to 12px
and font family to Arial
for a text
element:
d3.select("text")
.attr("fill", "black")
.selectAll("tspan")
.data(["Hello", "World"])
.enter()
.append("tspan")
.attr("x", 0)
.attr("y", function(d, i) { return i * 20; })
.attr("font-size", "12px")
.attr("font-family", "Arial")
.text(function(d) { return d; });
The output of the above code is two lines of text with font size of 12px
and font family of Arial
:
Hello
World
Code explanation
d3.select("text")
: Selects thetext
element from the DOM..attr("fill", "black")
: Sets the fill color of thetext
element toblack
..selectAll("tspan")
: Selects alltspan
elements within thetext
element..data(["Hello", "World"])
: Binds the data array to thetspan
elements..enter()
: Creates newtspan
elements for each data item..append("tspan")
: Appends thetspan
elements to the DOM..attr("x", 0)
: Sets the x-coordinate of thetspan
elements to0
..attr("y", function(d, i) { return i * 20; })
: Sets the y-coordinate of thetspan
elements to0
,20
,40
, etc..attr("font-size", "12px")
: Sets the font size of thetspan
elements to12px
..attr("font-family", "Arial")
: Sets the font family of thetspan
elements toArial
..text(function(d) { return d; })
: Sets the text content of thetspan
elements to the corresponding data item.
Helpful links
More of Javascript D3
- How do I create a zoomable chart using d3.js?
- How do I use D3.js to zoom on the x-axis?
- How do I use the viewbox feature in d3.js?
- How do I create a graph using D3.js?
- How do I create a bar chart using d3.js?
- How can I use D3.js to read a CSV file?
- How do I create a zoomable line chart using d3.js?
- How do I use the z-index property with d3.js?
- How do I implement zooming in a d3.js visualization?
- How to create a Gantt chart using D3.js?
See more codes...