自然な方法でテキストオブジェクトを追加します。D3.js

Question

D3を初めて使用しました。私は画面上に文章を表示したい、配列に単語がある、すべての単語が重複しているコードを実行するとき、それらを通常のテキストのような自然な方法で表示したい。

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

単純な方法の1つは、単一のテキスト要素内にtspan要素を使用することです。

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>