CODEWITHSUNDEEP
javascriptd3.jssvg
Jeremy Hunts
Jeremy Hunts

Reputation: 363

Append text objects in a natural way D3.js

I'm new to D3. I want to display a sentence on screen, I have the words in an array, when i run the code all words are overlapping, I want them displayed in a natural way like normal text.

var margin = {top: 20, right: 20, bottom: 30, left: 20},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;


var svgContainer = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var cars=["this","is","a","normal","sentence"];

var text = svgContainer.selectAll("text")
                        .data(cars)
                        .enter()
                        .append("text");

//Add SVG Text Element Attributes
var textLabels = text

                 .text( function (d) { return d; })
                 .attr("font-family", "sans-serif")
                 .attr("font-size", "20px")
                 .attr("fill", "red");

Upvotes: 1

Views: 756

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

One simple way is to use tspan elements within a single text element.

var margin = {top: 20, right: 20, bottom: 30, left: 20},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;


var svgContainer = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var text = svgContainer.append("text");

var cars=["this","is","a","normal","sentence"];

var text = text.selectAll("tspan")
                        .data(cars)
                        .enter()
                        .append("tspan");

//Add SVG Text Element Attributes
var textLabels = text

                 .text( function (d) { return d + ' '; })
                 .attr("font-family", "sans-serif")
                 .attr("font-size", "20px")
                 .attr("fill", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Upvotes: 2

Related Questions