|
20 | 20 | <!--<button onclick="window.history.back();">BACK</button>--> |
21 | 21 | <button onclick="saveSvgAsPng(document.getElementById('theSVG'), '@Model.Name' + '.png');">SAVE <span class="material-icons-outlined">save</span></button> |
22 | 22 | <button onclick="copyMarkdown()">MARKDOWN <span class="material-icons-outlined">content_paste</span></button> |
| 23 | +<button onclick="blackWhite()">BLACK<span class="material-icons-outlined">swap_horizontal_circle</span>WHITE</button> |
23 | 24 | <style> |
24 | 25 |
|
25 | 26 | .link { |
|
119 | 120 | var link = svg.selectAll(".link"), |
120 | 121 | text = svg.selectAll(".text"), |
121 | 122 | tspan = svg.selectAll(".tspan"), |
122 | | - node = svg.selectAll(".node"); |
| 123 | + node = svg.selectAll(".node"), |
| 124 | + rect = svg.selectAll(".rect"); |
123 | 125 |
|
124 | 126 | d3.json("/graphs/graph.json", function (error, graph) { |
125 | 127 | if (error) throw error; |
|
155 | 157 | .on("dblclick", dblclick) |
156 | 158 | .call(drag); |
157 | 159 |
|
| 160 | + // Adding for text backgrounds |
| 161 | + rect = svg.selectAll(".node-group") |
| 162 | + .append("rect") |
| 163 | + .data(force.nodes()) |
| 164 | + .attr("x", function (d) { return d.x; }) |
| 165 | + .attr("y", function (d) { return d.y; }) |
| 166 | + .attr("rx", 6) |
| 167 | + .attr("ry", 6) |
| 168 | + .style("fill", "#d2d2d2") |
| 169 | + .style("opacity", "0.9"); |
| 170 | + // end |
158 | 171 |
|
159 | 172 | text = svg.selectAll(".node-group") |
160 | 173 | .append("text") |
|
166 | 179 | .attr("class", "node-title") |
167 | 180 | .call(wrap, 200); |
168 | 181 |
|
| 182 | + //Adding for text background |
| 183 | + svg.selectAll("text") |
| 184 | + .each(function (d) { d.bbox = this.getBBox(); }); |
| 185 | +
|
| 186 | + const xMargin = 4; |
| 187 | + const yMargin = 2; |
| 188 | + svg.selectAll("rect") |
| 189 | + .data(force.nodes()) |
| 190 | + .attr("width", d => d.bbox.width + 2 * xMargin) |
| 191 | + .attr("height", d => d.bbox.height + 2 * yMargin) |
| 192 | + .attr("class", "node-rects") |
| 193 | + .attr("transform", function (d) { |
| 194 | + return `translate(-${xMargin}, -${d.bbox.height * 0.8 + yMargin})` |
| 195 | + }); |
| 196 | + // end |
| 197 | +
|
169 | 198 | link_text = svg.selectAll(".link-group") |
170 | 199 | .append("text") |
171 | 200 | .data(force.links()) |
|
180 | 209 | else { return (d.target.y + (d.source.y - d.target.y) / 2); } |
181 | 210 | }).attr("fill", "Black") |
182 | 211 | .style("font", "bold 18px Arial") |
| 212 | + .attr("class", "link-numbers") |
183 | 213 | .attr("dy", 20); |
184 | 214 | }); |
185 | 215 |
|
|
200 | 230 | .attr("y", function (d) { return d.y - 32; }); |
201 | 231 |
|
202 | 232 | text.attr("x", function (d) { return d.x; }) |
203 | | - .attr("y", function (d) { return d.y + 50; }); |
| 233 | + .attr("y", function (d) { return d.y + 55; }); |
204 | 234 |
|
205 | 235 | svg.selectAll("tspan") |
206 | 236 | .attr("x", function (d) { return d.x; }) |
207 | | - .attr("y", function (d) { return d.y + 50; }); |
| 237 | + .attr("y", function (d) { return d.y + 55; }); |
208 | 238 |
|
209 | 239 | link_text.attr("x", function (d) { |
210 | 240 | if (d.target.x > d.source.x) { return (d.source.x + (d.target.x - d.source.x) / 2); } |
|
214 | 244 | if (d.target.y > d.source.y) { return (d.source.y + (d.target.y - d.source.y) / 2); } |
215 | 245 | else { return (d.target.y + (d.source.y - d.target.y) / 2); } |
216 | 246 | }); |
| 247 | +
|
| 248 | + svg.selectAll("rect") |
| 249 | + .attr("x", function (d) { return d.x - d.bbox.width/2; }) |
| 250 | + .attr("y", function (d) { return d.y + 55 }); |
217 | 251 | } |
218 | 252 |
|
219 | 253 | function tick_alpha() { |
|
311 | 345 | var content = table.innerHTML; |
312 | 346 | navigator.clipboard.writeText(content); |
313 | 347 | } |
| 348 | +
|
| 349 | + function blackWhite() { |
| 350 | + var titles = document.getElementsByClassName("node-title"); |
| 351 | + for (i = 0; i < titles.length; i++) { |
| 352 | + if (titles[i].style.fill == "black") { titles[i].style.fill = "white"; } |
| 353 | + else if (titles[i].style.fill == "white") { titles[i].style.fill = "black"; } |
| 354 | + else { titles[i].style.fill = "white"; } |
| 355 | + } |
| 356 | +
|
| 357 | + var linkNumbers = document.getElementsByClassName("link-numbers"); |
| 358 | + for (i = 0; i < linkNumbers.length; i++) { |
| 359 | + var color = linkNumbers[i].style.fill; |
| 360 | + if (color == "black") { linkNumbers[i].style.fill = "white"; } |
| 361 | + else if (color == "white") { linkNumbers[i].style.fill = "black"; } |
| 362 | + else { linkNumbers[i].style.fill = "white"; } |
| 363 | + } |
| 364 | +
|
| 365 | + var body = document.body; |
| 366 | + if (body.style.backgroundColor == "white") { body.style.backgroundColor = "black"; } |
| 367 | + else if (body.style.backgroundColor == "black") { body.style.backgroundColor = "white"; } |
| 368 | + else { body.style.backgroundColor = "black"; } |
| 369 | +
|
| 370 | + var rectangles = document.getElementsByClassName("node-rects"); |
| 371 | + for (i = 0; i < rectangles.length; i++) { |
| 372 | + var color = rectangles[i].style.fill; |
| 373 | + alert(color); |
| 374 | + if (color == "rgb(210, 210, 210)") { rectangles[i].style.fill = "rgb(74, 74, 74)"; } |
| 375 | + else if (color == "rgb(74, 74, 74)") { rectangles[i].style.fill = "rgb(210, 210, 210)"; } |
| 376 | + else { rectangles[i].style.fill = "rgb(74, 74, 74)"; } |
| 377 | + } |
| 378 | +
|
| 379 | + } |
314 | 380 | </script> |
315 | 381 |
|
316 | 382 | <pre id="markdown-table" style="display:none;"> |
|
0 commit comments