Пакет пузырьков в зависимости от размера круга

Я хотел бы правильно упаковать свой проект с пузырьковой диаграммой (я меняю размер благодаря значению в моем JSON .attr("r", function(d) { return d.size; })), если у меня много пузыря, они перекрываются. метод .pack() на скамье подсудимых, но я не правильно его использовать, я не понимаю, как использовать егоПакет пузырьков в зависимости от размера круга

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
    text { 
     font: 10px sans-serif; 
    } 
</style> 
<body> 
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script> 

    var diameter = 960, 
      format = d3.format(",d"), 
      color = d3.scale.category20c(); 

    var bubble = d3.layout.pack() 
      .sort(null) 
      .size([diameter, diameter]) 
      .padding(1.5); 

    var svg = d3.select("body").append("svg") 
      .attr("width", diameter) 
      .attr("height", diameter) 
      .attr("class", "bubble"); 


    d3.json("./data.json", function(error, root) { 
     if (error) throw error; 

     var node = svg.selectAll(".node") 
       .data(bubble.nodes(classes(root)) 
       .filter(function(d) { return !d.children; })) 
       .enter().append("g") 
       .attr("class", "node") 
       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

     node.append("title") 
       .text(function(d) { return d.className + ": " + format(d.value); }); 

     node.append("circle") 
       .attr("r", function(d) { return d.size; }) 
       .style("fill", function(d) { return color(d.size); }); 

     node.append("text") 
       .attr("dy", ".3em") 
       .style("text-anchor", "middle") 
       .text(function(d) { return d.className.substring(0, d.r/3); }); 

    }); 

    // Returns a flattened hierarchy containing all leaf nodes under the root. 
    function classes(root) { 
     var classes = []; 
     function recurse(name, node) { 
      if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
      else classes.push({packageName: name, className: node.name, value: node.size, size: node.size}); 
     } 
     recurse(null, root); 
     return {children: classes}; 
    } 
    d3.select(self.frameElement).style("height", diameter + "px"); 

</script> 
</body>

Это проект Plunker:. https://plnkr.co/edit/PjN6v3dr2yP3oST5sCTB?p=preview

источник

2016-04-25 Anonyme

Вместо этой линии:

.attr("r", function(d) {return d.size; })

Использование d.r, который генерируется Блистерная:

.attr("r", function(d) {return d.r; })

Обновлено plnkr: https://plnkr.co/edit/ao9RbxOKQ7VuobzOsVJd?p=preview

источник

2016-04-25 15:21:42 thatOneGuy

Пузырь упаковка знает размер, как вы передаете его значение в функции RECURSE: значение: node.size – thatOneGuy

Хорошо, спасибо! '.attr (" r ", function (d) {return dr;})' был в исходном примере, поэтому я не понимаю, что такое атрибут: '.value (function (d) {console.log (d .size); return d.size;}) ' – Anonyme

Пакет пузырьков в зависимости от размера круга

ответ

Смежные вопросы