javascript - Zoomable Circle Packing with Automatic Text Sizing in D3.js -

-

i'm trying merge 2 of mike's examples: zoomable circle packing + automatic text sizing.

it works when displayed @ top-level. however, if zoom in next level, fonts not sized correctly.

i'm not sure if need modify transform, or modify part calculates font size.

here's codepen: http://codepen.io/anon/pen/gjwqrl

var circlefill = function(d) {     if (d['color']) {         return d.color;     } else {         return d.children ? color(d.depth) : '#fff';     } }  var calculatetextfontsize = function(d) {     return math.min(2 * d.r, (2 * d.r - 8) / this.getcomputedtextlength() * 11) + "px"; }  var margin = 20,     diameter = 960;  var color = d3.scale.linear()     .domain([-1, 18])     .range(["hsl(0,0%,100%)", "hsl(228,30%,40%)"])     .interpolate(d3.interpolatehcl);  var pack = d3.layout.pack()     .padding(2)     .size([diameter - margin, diameter - margin])     .value(function(d) {         return d.size;     })  var svg = d3.select("body").append("svg")     .attr("width", window.innerwidth)     .attr("height", window.innerheight)     .append("g")     .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");  var focus = root,     nodes = pack.nodes(root),     view;  var circle = svg.selectall("circle")     .data(nodes)     .enter().append("circle")     .attr("class", function(d) {         return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";     })     .style("fill", circlefill)     .on("click", function(d) {         if (focus !== d) zoom(d), d3.event.stoppropagation();     });  circle.append("svg:title")     .text(function(d) {         return d.name;     })  var text = svg.selectall("text")     .data(nodes)     .enter().append("text")     .attr("class", "label")     .style("fill-opacity", function(d) {         return d.parent === root ? 1 : 0;     })     .style("display", function(d) {         return d.parent === root ? null : "none";     })     .text(function(d) {         return d.name;     })     .style("font-size", calculatetextfontsize)     .attr("dy", ".35em");  var node = svg.selectall("circle,text");  d3.select("body")     .style("background", color(-1))     .on("click", function() {         zoom(root);     });  zoomto([root.x, root.y, root.r * 2 + margin]);  function zoom(d) {     var focus0 = focus;     focus = d;      var transition = d3.transition()         .duration(d3.event.altkey ? 7500 : 750)         .tween("zoom", function(d) {             var = d3.interpolatezoom(view, [focus.x, focus.y, focus.r * 2 + margin]);             return function(t) {                 zoomto(i(t));             };         });      transition.selectall("text")         .filter(function(d) {             return d.parent === focus || this.style.display === "inline";         })         .style("fill-opacity", function(d) {             return d.parent === focus ? 1 : 0;         })         .each("start", function(d) {             if (d.parent === focus) this.style.display = "inline";         })         .each("end", function(d) {             if (d.parent !== focus) this.style.display = "none";         }); }  function zoomto(v) {     var k = diameter / v[2];     view = v;     node.attr("transform", function(d) {         return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")";     });     circle.attr("r", function(d) {         return d.r * k;     }); }  d3.select(self.frameelement).style("height", diameter + "px");

clicking largest sub-circle in "vis" circle illustrates problem.

https://dl.dropboxusercontent.com/u/3040414/vis-circle.png

first give id circle, here giving text name circle id can link text , circle via text name.

var circle = svg.selectall("circle")   .data(nodes)   .enter().append("circle")   .attr("class", function(d) {     return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";   })   .style("fill", circlefill)   .attr("r", function(d) {     return d.r;   })   .attr("id", function(d) {     return d.name;//setting text name id   })   .on("click", function(d) {     if (focus !== d) zoom(d), d3.event.stoppropagation();   });

on transition complete of zoom(d) function(i.e when click on circle , zooms) add timeout function recalculate text font size based on zoom.

settimeout(function() {   d3.selectall("text").filter(function(d) {     return d.parent === focus || this.style.display === "inline";   }).style("font-size", calculatetextfontsize);//calculate font }, 500)

your calculatetextfontsize function this(i using real dom radius calculate font size):

var calculatetextfontsize = function(d) {   var id = d3.select(this).text();   var radius = 0;   if (d.fontsize){     //if fontsize calculated use that.     return d.fontsize;   }   if (!d.computed ) {     //if computed not present & store getcomputedtextlength() of text field     d.computed = this.getcomputedtextlength();     if(d.computed != 0){       //if computed not 0 visual radius of dom       var r = d3.selectall("#" + id).attr("r");       //if radius present in dom use       if (r) {         radius = r;       }       //calculate font size , store in object future       d.fontsize = (2 * radius - 8) / d.computed * 24 + "px";       return d.fontsize;       }   } }

working code here


Comments

Post a Comment

Popular posts from this blog

python - TypeError: start must be a integer -

-
i trying draw 5 turtles, getting typeerror on line 25. here code: import turtle wn = turtle.screen() redrose = turtle.turtle() color = input("what background color be?") fillcolor_f = input("what color of rose be?") redrose.hideturtle() redrose.speed(30) redrose.penup() redrose.left(180) redrose.forward(175) redrose.right(90) redrose.forward(30) redrose.right(90) redrose.pendown() def drawrose(red): redrose.color("pink") redrose.fillcolor(fillcolor_f) redrose.fill(true) in range(red): redrose.forward(i) redrose.right(49) in range(5): drawrose(redrose) redrose.penup() redrose.forward(350) redrose.right(144) redrose.pendown() redrose.fill(false) drawrose(50) wn.bgcolor(color) i trying draw 5 roses, produces errors. doing in interactivepython.org. you recursively calling drawrose wrong parameter. on line 23 ( for in range(red): ) expect red integer...
Read more

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

-
i have following code almost works properly; private void cbstatus_drawitem(object sender, listboxdrawitemeventargs e) { string item = e.item string; if (item != null) { switch (item) { case "1": e.appearance.forecolor = color.green; e.appearance.backcolor = color.green; break; case "2": e.appearance.forecolor = color.orange; e.appearance.backcolor = color.orange; break; case "3": e.appearance.forecolor = color.red; e.appearance.backcolor = color.red; break; } } } when dropdown shown, items forecolor correct, backcolor remains whatever backcolor of theme is; i.e. if i've got set dark theme, backcolor dark, cells in gridview, rather being green/orange/red. i've tried setting e.appearance.options.usebackcolor trying set e....
Read more

django - Creating multiple model instances in DRF3 -

-
1) create multiple model instances 1 api call, asked here: how create multiple model instances django rest framework? tried solution named in link, no success. i trying upload multiple files in 1 api call. result: files uploaded (only once overwrote perform_create) 1 instance created (if send 2 files, latter created instance). my code: class fileuploadserializer(serializers.modelserializer): def __init__(self, *args, **kwargs): many = kwargs.pop('many', true) super(fileuploadserializer, self).__init__(many=many, *args, **kwargs) class meta: model = fileupload read_only_fields = ('created', 'datafile', 'owner') class fileuploadviewset(viewsets.modelviewset): queryset = fileupload.objects.all() serializer_class = fileuploadserializer parser_classes = (multipartparser, formparser, ) def perform_create(self, serializer): file_list = self.request.data.getlist('file') ...
Read more