CODEWITHSUNDEEP
javascriptd3.js
Katsuya Obara
Katsuya Obara

Reputation: 963

how to implement multiline with d3.js?

I am trying to implement multiline with d3.js referring to this example. Even though the function in this example expect to get array as argument,following conventional way in d3, I only can come up the idea to pass the argument as function.
Does anyone know how I can pass argument as array? or any way to change the function to accept function as argument?

Code snippet to bind text to chart component

arcs.append("svg:text")                                  
        .attr("transform", function(d) {                  

        d.innerRadius = 0;
        d.outerRadius = r;
        return "translate(" + arc.centroid(d) + ")";        
    })
    .attr("text-anchor", "middle")                          
    //.text(function(d, i) { return data[i].label; }); 
    .html(centerLinebreak(function(d, i) { 
        console.log([data[i].label,data[i].perc])
        return [data[i].label,data[i].perc];
    }));

Code snippet to return multiline component receiving multi string component as array 

function centerLinebreak(array){
  console.log(array)
  var string = "";
  var maxTextLength = d3.max(array, function(d){ return d.length })
  array.forEach(function(t, i){
    var l = (maxTextLength - t.length) /2;
    string += '<tspan class="line'+i+'" '+'y="' +i+ 'em" x="'+l+'em">' + t + '</tspan>'
  });
  return string
}

Upvotes: 1

Views: 69

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Something like this (move the logic of making array into centerLinebreak function)

arcs.append("svg:text")                                  
        .attr("transform", function(d) {                  

        d.innerRadius = 0;
        d.outerRadius = r;
        return "translate(" + arc.centroid(d) + ")";        
    })
    .attr("text-anchor", "middle")                          
    //.text(function(d, i) { return data[i].label; }); 
    .html(centerLinebreak); //call the function like this

//change the function to accept data and index 
function centerLinebreak(data, i){
 //make the array
 var array = [data[i].label,data[i].perc];

  var string = "";
  var maxTextLength = d3.max(array, function(d){ return d.length })
  array.forEach(function(t, i){
    var l = (maxTextLength - t.length) /2;
    string += '<tspan class="line'+i+'" '+'y="' +i+ 'em" x="'+l+'em">' + t + '</tspan>'
  });
  return string
}

Upvotes: 1

Related Questions