Introduire un retour a la ligne dans un enregistrement d'un array

**binco** · 18/01/2017, 17h13

Bonjour,

Comment introduire un retour a la ligne dans un enregistrement d'un array:
j ai essayé avec \n mais ça ne marche pas.
Dans les circles le texte apparait comme ceci "Google \n Analytics"

Merci

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html> <!--on declare au validator le langage utilisé: html5-->
 
<html lang="fr">
 
<body>
 
<div class="container">	
 
<div class="row">
	<br>
	<div class="col-xs-4 col-sm-4 col-md-4 col-lg-12">
		<span  class="acceuil">Notre savoir faire</span>
	</div>
	<svg></svg>
	<br>
</div>
 
<br>
 
<br>
 
</div>
 
<script src="http://d3js.org/d3.v3.js"></script>
<script>
 
// GROUPS:  0 Web | 1: Adobe | 2: hybrid
var data = [
  {"id": 0, "name": "Html", "r": 40 },
  {"id": 0, "name": "PHP", "r": 40 },
  {"id": 0, "name": "Javascript", "r": 40 },
  {"id": 0, "name": "d3.js", "r": 40 },
  {"id": 0, "name": "AJAX", "r": 40 },
  {"id": 0, "name": "Google \n Analytics", "r": 80 },
  {"id": 0, "name": "SVG", "r": 40 },
  {"id": 0, "name": "Bootstrap", "r": 40 },
  {"id": 0, "name": "CSS", "r": 40 },
  {"id": 0, "name": "PHP", "r": 40 },
  {"id": 0, "name": "jQuery", "r": 40 },
  {"id": 0, "name": "MySQL", "r": 40 },
  {"id": 0, "name": "CMS", "r": 40 },
  {"id": 0, "name": "W3C", "r": 40 },
  {"id": 0, "name": "Filezilla", "r": 40 },
 
  {"id": 1, "name": "Illustrator", "r": 40 },
  {"id": 1, "name": "Inkscape", "r": 40 },
  {"id": 1, "name": "Latex", "r": 40 },
 
  {"id": 2, "name": "R Project", "r": 40 },
  {"id": 2, "name": "Sphinx", "r": 40 },  
  {"id": 2, "name": "Question", "r": 40 },
  {"id": 2, "name": "MapInfo", "r": 40 },    
  {"id": 2, "name": "Excel", "r": 40 },
  {"id": 2, "name": "OpenOffice Calc", "r": 70 },
  {"id": 2, "name": "OpenOffice Tab", "r": 70 },
  {"id": 2, "name": "Access", "r": 40 },
];
 
var width = window.innerWidth,  // affichage fenetre
    height = 400;
 
var fill = d3.scale.category10();
 
var nodes = [], labels = [],
    foci = [{x: 0, y: 300}, {x: 350, y: 300}, {x: 450, y: 300}];
 
var svg = d3.select("svg")
    .attr("width", "100%")
    .attr("height", 500)
    ;
 
var force = d3.layout.force()
    .nodes(nodes)
    .links([])
    .charge(-900)
    .chargeDistance(200)
    .gravity(0.1)
    .friction(0.8)
    .size([width, 450])
    .on("tick", tick);
 
//var node = svg.selectAll("circle");
var node = svg.selectAll("g");
 
var counter = 0;
 
function tick(e) {
  var k = .1 * e.alpha;
 
  // Push nodes toward their designated focus.
  nodes.forEach(function(o, i) {
    o.y += (foci[o.id].y - o.y) * k;
    o.x += (foci[o.id].x - o.x) * k;
  });
 
  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
 
}
 
var timer = setInterval(function(){
 
  if (nodes.length > data.length-1) { clearInterval(timer); return;}
 
  var item = data[counter];
  nodes.push({id: item.id, r: item.r, name: item.name});
  force.start();
 
  node = node.data(nodes);
 
  var n = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .style('cursor', 'pointer')
      .on('mousedown', function() {
         var sel = d3.select(this);
         sel.moveToFront();
      })
      .call(force.drag);
 
  n.append("circle")
      .attr("r",  function(d) { return d.r; })
      .style("fill", function(d) { return fill(d.id); })
 
  n.append("text")
      .text(function(d){
          return d.name;
      })
 
      .attr("dy", ".35em")
 
  counter++;
}, 100);
 
 
d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};
 
function resize() {
  width = window.innerWidth;
  force.size([width, height]);
  force.start();
}
 
d3.select(window).on('resize', resize);
</script>
 
</body>                                         
 
</html>

**danielhagnoul** · 18/01/2017, 22h14

C'est du SVG construit par d3, donc les solutions "\n" ou "<br/>" ne peuvent pas fonctionner.

Il faut utiliser le tag "tspan", voir :

d3plus.textwrap, voir : SVG Text Wrapping

**binco** · 27/01/2017, 00h47

Merci Daniel,

c'est un scripte libre de droit trouvé sur internet,

J'ai essayé d'incorporer la fonction d3plus.textwrap lors de l'ajout du texte dans les bulles mais sans succès
Je te cache pas que ca fait un bail que j ai pas fait de js

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html> <!--on declare au validator le langage utilisé: html5-->
 
<html lang="fr">
 
<?php include("0-head.php"); ?>
 
<body>
 
<div class="container">	
 
<?php include("0-entete.php"); ?>
 
<?php include("0-menu.php"); ?>
 
<div class="row">
	<div class="col-xs-12 col-sm-12 col-md-1 col-lg-1">
	</div>
	<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
		<svg></svg>
	</div>
	<div class="col-xs-12 col-sm-12 col-md-1 col-lg-1">
	</div>
</div>
 
	<br>
 
<?php include("0-pied-de-page.php"); ?>
 
</div>
 
<!--?php include("0-googleanalytics.php"); ?>-->
 
<!--, Texte clignotant-->
<script type="text/javascript">
var signe = -1;
var clignotementFading = function(){
   var obj = document.getElementById('LblClignotant');
   if (obj.style.opacity >= 0.96){
      signe = -1;
   }
   if (obj.style.opacity <= 0.4){
      signe = 1;
   }
   obj.style.opacity = (obj.style.opacity * 1) + (signe * 0.04);
};
 
// mise en place de l appel de la fonction toutes les 0.085 secondes
// Pour arrêter le clignotement : clearInterval(periode);
periode = setInterval(clignotementFading, 150 );
</script>
 
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://www.d3plus.org/js/d3plus.js"></script>
 
<script>
// GROUPS:  0 Web | 1: Adobe | 2: hybrid
var data = [
  {"id": 0, "name": "Html", "r": 40 },
  {"id": 0, "name": "PHP", "r": 40 },
  {"id": 0, "name": "Javascript", "r": 40 },
  {"id": 0, "name": "d3.js", "r": 40 },
  {"id": 0, "name": "AJAX", "r": 40 },
  {"id": 0, "name": "<tspan>Google</tspan><tspan>Analytics</tspan>", "r": 80 },
  {"id": 0, "name": "SVG", "r": 40 },
  {"id": 0, "name": "Bootstrap", "r": 40 },
  {"id": 0, "name": "CSS", "r": 40 },
  {"id": 0, "name": "PHP", "r": 40 },
  {"id": 0, "name": "jQuery", "r": 40 },
  {"id": 0, "name": "MySQL", "r": 40 },
  {"id": 0, "name": "CMS", "r": 40 },
  {"id": 0, "name": "W3C", "r": 40 },
  {"id": 0, "name": "Filezilla", "r": 40 },
 
  {"id": 1, "name": "Illustrator", "r": 40 },
  {"id": 1, "name": "Inkscape", "r": 40 },
  {"id": 1, "name": "Latex", "r": 40 },
 
  {"id": 2, "name": "R Project", "r": 40 },
  {"id": 2, "name": "Sphinx", "r": 40 },  
  {"id": 2, "name": "Question", "r": 40 },
  {"id": 2, "name": "MapInfo", "r": 40 },    
  {"id": 2, "name": "Excel", "r": 40 },
  {"id": 2, "name": "OpenOffice Calc", "r": 70 },
  {"id": 2, "name": "OpenOffice Tab", "r": 70 },
  {"id": 2, "name": "Access", "r": 40 },
 
  {"id": 3, "name": "Particuliers", "r": 70 },
  {"id": 3, "name": "Associations", "r": 70 },  
  {"id": 3, "name": "Indépendants", "r": 70 },
  {"id": 3, "name": "PME", "r": 40 },    
  {"id": 3, "name": "PMI", "r": 40 },
  {"id": 3, "name": "Collectivités", "r": 70 },
  {"id": 3, "name": "Institutionnels", "r": 70 },
  
  {"id": 4, "name": "Econométrie", "r": 50 },    
  {"id": 4, "name": "Analyses statistiques", "r": 50 },
  {"id": 4, "name": "Analyses spatiales", "r": 50 },
  {"id": 4, "name": "Conception web", "r": 50 },
];
 
var width = window.innerWidth,  // affichage fenetre
    height = 600;
 
var fill = d3.scale.category10();
 
var nodes = [], labels = [],
    foci = [{x: -200, y: 300}, {x: 0, y: 300}, {x: 200, y: 300}, {x: 400, y: 300}, {x: 800, y: 300}];
 
var svg = d3.select("svg")
    .attr("width", "100%")
    .attr("height", 500)
    ;
 
var force = d3.layout.force()
    .nodes(nodes)
    .links([])
    .charge(-900)
    .chargeDistance(200)
    .gravity(0.1)
    .friction(0.8)
    .size([width, 450])
    .on("tick", tick);
 
//var node = svg.selectAll("circle");
var node = svg.selectAll("g");
 
var counter = 0;
 
function tick(e) {
  var k = .1 * e.alpha;
 
  // Push nodes toward their designated focus.
  nodes.forEach(function(o, i) {
    o.y += (foci[o.id].y - o.y) * k;
    o.x += (foci[o.id].x - o.x) * k;
  });
 
  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
 
}
 
var timer = setInterval(function(){
 
  if (nodes.length > data.length-1) { clearInterval(timer); return;}
 
  var item = data[counter];
  nodes.push({id: item.id, r: item.r, name: item.name});
  force.start();
 
  node = node.data(nodes);
 
  var n = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .style('cursor', 'pointer')
      .on('mousedown', function() {
         var sel = d3.select(this);
         sel.moveToFront();
      })
      .call(force.drag);
 
  n.append("circle")
      .attr("r",  function(d) { return d.r; })
      .style("fill", function(d) { return fill(d.id); })
 
          
          
  n.append("text")
      .text(function(d){
          return d3plus.textwrap(d.name);
      })
      .attr("dy", ".35em")
 
  counter++;
}, 100);
 
d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};
 
function resize() {
  width = window.innerWidth;
  force.size([width, height]);
  force.start();
}
 
d3.select(window).on('resize', resize);
</script>
 
</body>                                         
 
</html>

peux tu m'aider?

cordialement

**NoSmoking** · 27/01/2017, 15h21

Bonjour,
je vois deux façons d'y arriver, autre que la solution d'utiliser la fonction définie dans le 2^éme lien de danielhagnoul.

Sur base de texte utilisant le \n comme séparateur, et en « splittant » la chaine il suffit de traiter chaque élément du tableau obtenu.
exemple de data

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{"id": 0, "name": "Google\nAnalytics\nautre\nligne", "r": 80 },

La 1st consiste à créer autant de <text> que tu as d'éléments pour obtenir une structure du type

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<svg>
  <g>
    <circle></circle>
    <text></text>
    <text></text>
  <g>
</svg>

donc exit tes lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
  n.append("text")
      .text(function(d){
          return d3plus.textwrap(d.name);
      })
      .attr("dy", ".35em")

qui seront à remplacer par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  var txt = item.name.split('\n');
  var lineHeight = 1.2;                     // valeur à ajuster
  var posY = - (txt.length - 1) * lineHeight / 2;
  posY += (lineHeight / 3);                 // recalage texte comme un vertical-align
 
  // on boucle 
  for( var i=0; i < txt.length; i +=1 ){
     // création d'un node <text>  
      n.append("text")
        .text( txt[i])
        .attr("dy", posY +"em")               // position vertical
        .attr("text-anchor", "middle")        // centrage horizontal        
        .attr("alignment-baseline", "middle") // vertical-align             
     // incrémentation position
     posY += lineHeight;
  }

La 2nd consiste à créer à l'intérieur d'un <text>, autant de <tspan> que tu as d'éléments pour obtenir une structure du type

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<svg>
  <g>
    <circle></circle>
    <text>
        <tspan></tspan>
        <tspan></tspan>
    </text>
  <g>
</svg>

dans ce cas on remplacera ton code par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  var txt = item.name.split('\n');
  var lineHeight = 1.2;                       // valeur à ajuster
  var posY = (lineHeight * txt.length) / 2;
  posY += (lineHeight / 3);                   // recalage texte comme un vertical-align
 
  // création d'un node <text>
  var svgTxt = n.append("text")
    .attr("text-anchor", "middle")            // centrage horizontal        
    .attr("y", -posY +"em");                  // recalage vertical zone de texte
 
  // on boucle     
  for( var i=0; i < txt.length; i +=1 ){
      // création d'un node <tspan>
      svgTxt.append("tspan")
        .text( txt[i])
        .attr("alignment-baseline", "middle") // vertical-align     
        .attr("dy", lineHeight +"em")         // espace vertical entre textes
        .attr("x", 0)                         // pour alignement des textes
  }

l’initialisation des variables est sensiblement différente et ce compte tenu des éléments manipulés.

**danielhagnoul** · 27/01/2017, 22h43

Envoyé par binco

[...] J'ai essayé d'incorporer la fonction d3plus.textwrap lors de l'ajout du texte dans les bulles mais sans succès [...]

d3plus améliore d3, il ne s'utilise pas de cette manière. Voir la documentation et les exemples : https://d3plus.org/examples/

Dans votre cas, je vous ai dit dans mon premier message qu'il faut éclater votre texte en tspan. Mon premier et mon second lien (fonction wrap) sont de bons exemples.

Je n'ai pas le temps de me remettre au SVG pour l'instant ni d'examiner la proposition de @NoSmoking.