javascript - Breaking text into two lines inside circle in d3 -

-

i have modified orbit layout mbostock examples... have problem in breaking text inside node in 2 lines...

i have written wrap function...but seems doesn't work....

all need text inside circle should come in 2 lines.... please advice.....

<html> <head>     <title>orbit layout modes</title>     <meta charset="utf-8" /> </head> <style>     #viz, svg {         width: 1000px;         height: 1000px;         padding-left:50px;     }       text {         pointer-events: none;     }      #buttons {         position: absolute;         top: 0;         left: 0;     }      circle.ring {         fill: none;         stroke: black;         stroke-width: 2.5px;         stroke-opacity: 0.5;         padding-left: 70px;     }  </style> <script>       function makeviz() {          d3.json("/newfolder1/solarsystem.txt", function (data) { draworbit(data) });       }      function draworbit(_data) {          orbitscale = d3.scale.linear()                         .domain([0.5, 3])                         .range([2.8, 0.5])                         .clamp(false);          radiusscale = d3.scale.linear()                         .domain([210.64, 2500, 10000, 71492.68,8000])                         .range([2+2, 4+2, 8+2, 16+2,32+2]);          var planetcolors = { "application management": "#004a80", "designer tools": "#009bc9", "application assembler": "#00ce7d", "common services": "yellow" }           orbit = d3.layout.orbit()                 .size([350, 350])                 .children(function (d) { return d.values })                 .revolution(function (d) { return 1 / d.orbital_period })                 .orbitsize(function (d) { return orbitscale(d.depth) })                 .speed(.5)                 .mode(" ")                 .nodes(_data);          d3.select("svg")           .append("g")           .attr("class", "viz")           .attr("transform", "translate(50,50)")           .selectall("g.node").data(orbit.nodes())           .enter()           .append("g")           .attr("class", "node")           .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")" })           .on("mouseover", nodeover)           .on("mouseout", nodeout)          d3.selectall("g.node")         .append("circle")         .attr("r", function (d) { return d.radius ? radiusscale(d.radius) : 70 })         .style("fill", function (d) { return d.depth == 0 ? "#21e2ea" : d.depth == 1 ? planetcolors[d.key] : "blue" });           d3.selectall("g.node").filter(function (d) { return d.depth == 0 })        .append("text")         .attr("x", -55)         .attr("y", 10)         //.style("text-anchor", "middle")         .text("planet torus")         .style("fill", "white")          .call(wrap, 100);          d3.selectall("g.node").filter(function (d) { return d.depth == 1 })         .append("text")         .text(function (d) { return d.key })         .attr("y", 30)         .style("text-anchor", "middle")         .style("fill", function (d) { return planetcolors[d.key] });          d3.select("g.viz")         .selectall("circle.ring")         .data(orbit.orbitalrings())         .enter()         .insert("circle", "g")         .attr("class", "ring")         .attr("r", function (d) { return d.r })         .attr("cx", function (d) { return d.x })         .attr("cy", function (d) { return d.y })          //d3.select("#buttons").append("button").html("solar").on("click", function () { newmode("solar") })         //d3.select("#buttons").append("button").html("flat").on("click", function () { newmode("flat") })         //d3.select("#buttons").append("button").html("atomic").on("click", function () { newmode("atomic") })         //d3.select("#buttons").append("button").html("custom").on("click", function () { newmode([4, 4]) })          orbit.on("tick", function () {             d3.selectall("g.node")            .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")" });             d3.selectall("circle.ring")             .attr("cx", function (d) { return d.x })             .attr("cy", function (d) { return d.y });         });          orbit.start();           function wrap(text, width)         {             text.each(function ()             {                 var text = d3.select(this),                     words = text.text().split(/\s+/).reverse(),                     word,                     line = [],                     linenumber = 1,                     lineheight = 2.1, // ems                     y = text.attr("y"),                     dy = parsefloat(text.attr("dy")),                     tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");                 while (word = words.pop())                 {                     line.push(word);                     tspan.text(line.join(" "));                     if (tspan.node().getcomputedtextlength() > width)                      {                         line.pop();                         tspan.text(line.join(" "));                         line = [word];                         tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++linenumber * lineheight + dy + "em").text(word);                     }                 }             });         }          function type(d) {             d.value = +d.value;             return d;         }          function newmode(_mode)         {             orbit.mode(_mode)                  .nodes(_data);              d3.select("g.viz")               .selectall("circle.ring")               .data(orbit.orbitalrings())               .exit()               .transition()               .duration(500)               .style("stroke-opacity", 0)               .style("stroke-width", 3)               .remove();              d3.select("g.viz")             .selectall("circle.ring")             .data(orbit.orbitalrings())             .enter()             .insert("circle", "g")             .attr("class", "ring");              d3.selectall("circle.ring")             .attr("r", function (d) { return d.r })             .attr("cx", function (d) { return d.x })             .attr("cy", function (d) { return d.y });          }          function nodeover(d) {             orbit.stop();              if (d.depth == 2) {                 d3.select(this).append("text").text(d.label || d.key).style("text-anchor", "middle")                 .attr("y", 15)                 .attr("class", "moon");             }             d3.select(this).select("circle").style("stroke", "white  ").style("stroke-width", 3);         }          function nodeout() {             orbit.start();             d3.selectall("text.moon").remove();             d3.selectall("g.node > circle").style("stroke", "none").style("stroke-width", 0);         }       }  </script> <body onload="makeviz()">     <div id="viz">         <svg></svg><div id="buttons"></div>     </div>     <footer>         <script src="../d3/d3.min.js" charset="utf-8" type="text/javascript"></script>         <script src="d3.layout.orbit.js" charset="utf-8" type="text/javascript"></script>     </footer> </body> </html>

here fiddle sample code wrap function. couldnt understand use of dy in particular, made work 'y' attribute of each tspan element. check out:

html 

</div>

js 

var data = ["lorem ipsem","dolor sit","quo ubique"]     var svg = d3.select("div.svg").append("svg")         .append("g")       .attr("class","node").attr("transform", function (d) { return "translate(" + 10 + "," + 10 + ")" });      svg.selectall("g.node")         .data(data)       .enter()       .append("text")       .attr("y", 0)       .attr("x", function(d,i){return 100*i;})       .text(function(d){return d;})       .call(wrap, 10);         function wrap(text, width)         {             text.each(function ()             {                 var text = d3.select(this),                     words = text.text().split(/\s+/).reverse(),                     word,                     line = [],                     linenumber = 1,                     lineheight = 2,                     x = text.attr("x"),                     y = text.attr("y");                     tspan = text.text(null).append("tspan").attr("x", x).attr("y", y);                  while (word = words.pop())                 {                     line.push(word);                     tspan.text(line.join(" "));                     if (tspan.node().getcomputedtextlength() > width)                      {                         line.pop();                         tspan.text(line.join(" "));                         line = [word];                         tspan = text.append("tspan").attr("x", x).attr("y", ++linenumber * lineheight + y).text(word);                     }                 }             });         }

demo


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more