javascript - How to add labels into the arc of a chord diagram in d3.js -


this chord diagram d3.js version 4 (based on this chart in v3). can run or have @ image: 

<!doctype html>  <html>    <head>      <meta http-equiv="content-type" content="text/html;charset=utf-8"/>      <title>chord diagramm</title>        <!-- d3.js -->      <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>      <!-- google fonts -->      <link href='https://fonts.googleapis.com/css?family=lato:400,900' rel='stylesheet' type='text/css'>      <!-- bootstrap 4(!) -->      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoiresju2yc3z8gv/npezwav56rsmlldc3r/azzgrngxqqknkkofvhfqhnuweyj" crossorigin="anonymous">      <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-a7fzj7v+d/sdmmqp/noqwlilvusjfdhw+k9omg/a/eheadgtzns3hpfag6ed950n" crossorigin="anonymous"></script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-dztdapbwprxsa/3eyeeuwrwcy7g5kfbe8ffjk5jaixuyhkkdx6qin1dkwx51bbrb" crossorigin="anonymous"></script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vbwwzlzj8ea9acx4pew3rvhjgjt7zpknpzk+02d9phzyevke+jo0iegizqplforn" crossorigin="anonymous"></script>        <style>        body {          font-size: 12px;          font-family: 'lato', sans-serif;          text-align: center;          fill: #2b2b2b;          cursor: default;        }          @media (min-width: 600px) {          #chart{            font-size: 16px;          }        }      </style>    </head>    <body>      <h1> chord diagramm </h1>      <div id = "chart"></div>    </body>      <script>    ////////////////////////////////////////////////////////////    //////////////////////// set-up ////////////////////////////    ////////////////////////////////////////////////////////////      var margin = {left:90, top:90, right:90, bottom:90},      width =  1000 - margin.left - margin.right, // more flexibility: math.min(window.innerwidth, 1000)      height =  1000 - margin.top - margin.bottom, // same: math.min(window.innerwidth, 1000)      innerradius = math.min(width, height) * .39,      outerradius = innerradius * 1.1;      var names = ["test1","test2","amo-db","youtube","twitter", "google+", "pflegeratgeber" ,"o-mag","ruv"],      colors = ["#301e1e", "#083e77", "#342350", "#567235", "#8b161c", "#df7c00"],      opacitydefault = 0.8;      var matrix = [      [0,1,1,1,1,1,1,1,1], //test1      [0,0,1,1,1,1,1,0,1], //test2      [0,1,0,1,1,1,1,1,1], //hawkeye      [0,1,1,0,1,1,0,1,1], //the hulk      [0,1,1,1,0,1,1,1,1], //iron man      [0,1,1,1,1,0,1,1,1],      [0,1,1,1,1,1,0,1,1], //iron man      [0,1,1,1,1,1,1,0,1],      [0,1,1,1,1,1,1,0,0] //thor //thor    ];      ////////////////////////////////////////////////////////////    /////////// create scale , layout functions //////////////    ////////////////////////////////////////////////////////////      var colors = d3.scaleordinal()        .domain(d3.range(names.length))      .range(colors);      var chord = d3.chord()      .padangle(.15)      .sortchords(d3.descending)        var arc = d3.arc()      .innerradius(innerradius*1.01)      .outerradius(outerradius);      var path = d3.ribbon()    .radius(innerradius);    ////////////////////////////////////////////////////////////  ////////////////////// create svg //////////////////////////  ////////////////////////////////////////////////////////////    var svg = d3.select("#chart").append("svg")    .attr("width", width + margin.left + margin.right)    .attr("height", height + margin.top + margin.bottom)    .append("g")    .attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")")    .datum(chord(matrix));    ////////////////////////////////////////////////////////////  ////////////////// draw outer arcs /////////////////////////  ////////////////////////////////////////////////////////////    var outerarcs = svg.selectall("g.group")    .data(function(chords) { return chords.groups; })    .enter().append("g")    .attr("class", "group")    .on("mouseover", fade(.1))    .on("mouseout", fade(opacitydefault))      // text popups    .on("click", mouseoverchord)    .on("mouseout", mouseoutchord);    outerarcs.append("path")    .style("fill", function(d) { return colors(d.index); })    .attr("d", arc);    ////////////////////////////////////////////////////////////  ////////////////////// append names ////////////////////////  ////////////////////////////////////////////////////////////    //append label names on outside  outerarcs.append("text")    .each(function(d) { d.angle = (d.startangle + d.endangle) / 2; })    .attr("dy", ".35em")    .attr("class", "titles")    .attr("text-anchor", function(d) { return d.angle > math.pi ? "end" : null; })    .attr("transform", function(d) {      return "rotate(" + (d.angle * 180 / math.pi - 90) + ")"      + "translate(" + (outerradius + 10) + ")"      + (d.angle > math.pi ? "rotate(180)" : "");    })    .text(function(d,i) { return names[i]; });      ////////////////////////////////////////////////////////////  ////////////////// draw inner chords ///////////////////////  ////////////////////////////////////////////////////////////    svg.selectall("path.chord")    .data(function(chords) { return chords; })    .enter().append("path")    .attr("class", "chord")    .style("fill", function(d) { return colors(d.source.index); })    .style("opacity", opacitydefault)    .attr("d", path);    ////////////////////////////////////////////////////////////  ////////////////// functions /////////////////////////  ////////////////////////////////////////////////////////////    function popup() {    return function(d,i) {      console.log("love");    };  }//popup    //returns event handler fading given chord group.  function fade(opacity) {    return function(d,i) {      svg.selectall("path.chord")          .filter(function(d) { return d.source.index != && d.target.index != i; })      .transition()          .style("opacity", opacity);    };  }//fade      //highlight hovered on chord  function mouseoverchord(d,i) {      //decrease opacity    svg.selectall("path.chord")      .transition()      .style("opacity", 0.1);    //show hovered on chord full opacity    d3.select(this)      .transition()          .style("opacity", 1);      //define , show tooltip on mouse location    $(this).popover({      //placement: 'auto top',      title: 'test',      placement: 'right',      container: 'body',      animation: false,      offset: "20px -100px",      followmouse: true,      trigger: 'click',      html : true,      content: function() {        return "<p style='font-size: 11px; text-align: center;'><span style='font-weight:900'>"  +             "</span> text <span style='font-weight:900'>"  +             "</span> folgt hier <span style='font-weight:900'>" + "</span> movies </p>"; }    });    $(this).popover('show');  }  //bring chords default opacity  function mouseoutchord(d) {    //hide tooltip    $('.popover').each(function() {      $(this).remove();    })    //set opacity default    svg.selectall("path.chord")      .transition()      .style("opacity", opacitydefault);    }      //function mouseoutchord    </script>  </html>

i tried follow example: http://bl.ocks.org/syntagmatic/9eadf19bd2976653fa50 , found similar thread here: d3.js add labels in chord diagram

however, can't wrap head around how integrate code. appreciated.enter image description here

we can approach this:

  1. add id paths while you're appending them based on group in.

    outerarcs.append("path")   .style("fill", function(d) { return colors(d.index); })   .attr("id", function(d, i) { return "group" + d.index; }) //add id here   .attr("d", arc);

  2. append text directly path , use textpath places inside arc following:

    outerarcs.append("text")      .attr("x", 6)     .attr("dy", 15)   .append("textpath")     .attr("xlink:href", function(d) { return "#group" + d.index; })     .text(function(chords, i){return names[i];})     .style("fill", "white");

working code here - https://jsfiddle.net/rjonean4/


Comments

Post a Comment

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

does autofac support specifying registration name in components' constructors? example: ninject's namedattribute . you need use autofac.extras.attributed package on top achieve this so let's have 1 interface , 2 classes: public interface ihello { string sayhello(); } public class englishhello : ihello { public string sayhello() { return "hello"; } } public class frenchhello : ihello { public string sayhello() { return "bonjour"; } } then have consumer class, in want select instance injected: public class helloconsumer { private readonly ihello helloservice; public helloconsumer([withkey("en")] ihello helloservice) { if (helloservice == null) { throw new argumentnullexception("helloservice"); } this.helloservice = helloservice; } public string sayhello() { return this.helloservice.sayhello()...
Read more

verilog - Systemverilog dynamic casting issues -

i've code snippet following in testbench function void write_to_port( my_data_type_base data ); my_data_type_extended data_ext; if(!$cast(data_ext, data)); `uvm_error(get_type_name(), "failed cast"); `uvm_info(get_name(), $psprintf("data_ext :\n%s", data_ext.sprint()), uvm_medium) // write data_ext out port.... endfunction when run it, i'm getting uvm_error "failed cast." i'm not quire sure why $cast not returning 1. can see, i'm printing out extended class data item after casting uvm_info. can see it's being cast properly. if don't use $cast if condition, don't runtime error. isn't coding practice use if dynamic cast check if $cast returning 1 ? what might reason behind cast not returning 1 in above case? i think semicolon on line 'if' not belong? i think consumes if statement, , uvm_error executes regardless of how if evaluates: if(!$cast(data_ext, data)); <- no semico...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more