Metin nesnelerine doğal bir şekilde ekleme D3.js

Question

D3 için yeni. Ekranda bir cümle göstermek istiyorum, bir dizide kelimeler var, kodu çalıştırdığımda tüm kelimeler çakışıyor, normal metin gibi doğal bir şekilde görüntülenmesini istiyorum.

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"); 

Answer 1

Tek bir metin öğesi içinde tspan öğelerini kullanmak basit bir yoldur.

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>