score:1
just as a complement to the other answer:
you can use either html()
or text()
methods here. the difference between them is that text()
uses textcontent
, while html()
uses innerhtml
.
we can see this at the source code for text()
:
this.textcontent = value;
and this at the source code for html()
:
this.innerhtml = value;
therefore, each method has its particularities.
using html()
as already explained, you can use html()
with <br>
:
d3.select("p").html("line 1: " + "this is line 1" + "<br>" + "line 2: " + "this is line 2");
<p></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
using text()
for using the text()
method, just as in your code, you have to select an adequate value for white-space, like pre
:
var p = d3.select("p");
p.text("line 1: " + "this is line 1" + "\n" + "line 2: " + "this is line 2");
p {
white-space: pre;
}
<p></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
score:3
instead of using .text()
, use .html()
, that way you can use <br>
like so:
tooltip.select("p").html("line1: this is line 1 <br> line 2: this is line 2");
if that doesn't work, try
tooltip.select("p").html(function(){
return "line 1: this is line 1 <br> line 2: this is line 2"
});
as this is how i currently use .html()
Source: stackoverflow.com
Related Query
- How to create a line break in an HTML element using D3.js
- How to create a % difference arrow line with value in a bar chart using D3.js
- How do I do a line break with SVG text element ?
- How to dynamically create append svg line using d3js?
- How to create variable number of image or circle elements in an SVG element using a loop in D3 js(v3)
- How to create a multiseries line chart using data filtered from a csv file?
- How to add a line break using d3.js text
- Line break not working in d3.js after using html too
- Can you insert a line break in text when using d3.js?
- How do I get the width of an svg element using d3js?
- How to draw line with arrow using d3.js
- How do I create a tree layout using JSON data in d3.v4 - without stratify()
- how to create labels for data in donut chart using d3.js
- How to create a choropleth of the world using d3?
- how to create multiline chart using dc.js
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- How do I create a <dl> using d3.js
- How to get reference to SVG (child) elements nested in another SVG element (parent) using D3?
- How to update elements of an HTML that the elements are created using data from a CSV file?
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How to create a responsive map using d3
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- How to create a histogram using d3.js and crossfilter data?
- How to create correlogram using D3 as in the example picture
- How to use tool tip in Line bar graph using D3 js
- How to break a line in d3.axis.tickFormat?
- how to make a radial line segment using D3.js
- How do I create a minimap of an SVG using D3 v5 and show the current viewport dimensions?
- How to add a line graph to a scatterplot using d3?
- How do I animate a line using d3.js?
More Query from same tag
- un stacking a stacker area chart in d3
- d3.js interpolation doesn't work
- d3.js : Applying styles to individual lines
- Selecting DOM elements but not their children in D3
- How to make d3 sunburst starting at 3 o'clock?
- Is it ever beneficial to generate layout of an html page in excel as oppose to creating in css?
- Difference in chaining D3.js transitions
- Using D3.js geom to scale a voronoi polygon with result in lat long, not coordinates in px
- d3.js updating from v3 to v5
- d3js tooltip is positioned incorrectly on bootstrap web
- How to implement multiple trees with different orientations in D3.js v4?
- After visualising MySQL data in d3 via JSON what can I do to return changes in json data back to mysql to make changes persistent
- How to check if the mouse is inside actual map bounds in d3 geo?
- D3 chart, adding more info to the one the chart brings by default
- d3.js Day Hour Heatmap loads on server restart, but disappears when the page is refreshed
- Line Plus Bar Chart - Is there any way to pass date as string without formatting?
- D3.js text not coming below each other and color selection
- D3.js duplicating my data
- D3.js upgrade from version 3 to version 4/5 - diagram not populating
- Dom-to-image SVG image elements
- Rotate Labels in d3 sunburst v4
- Why isn't month shown on my X Axis?
- How to create a calendar like iCal/Google Calendar using Javascript/jQuery/D3.js
- select a specific class with d3js to animate
- D3 Treemap- recursive boxes not appearing
- D3 Dynamic hierarchical edge bundling - 2 way import
- D3.js : Draw a new topojson and removing the old one
- How do you find the last data point in d3 and draw a circle and a line on it?
- D3 Web Map: Align raster PNG with TopoJSON
- Combine Nodes & Links in D3 Force Graph After CSV is Parsed to make one Array (Angular & D3.JS)