3

D3 を理解し、それを使用してワード クラウドを作成しようとしています... その目的で D3 サークル パックを使用するコードは次のとおりです。

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

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

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

d3.json("data/bubble.json", function(error, root) {
  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.r; })
    .style("fill", function(d) { return color(d.packageName); });

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

泡はランダムな順序で来ていますが、一番左のサイズの最大の円のように並べ替えられた順序で、右端の最も小さい円の右に小さいものになるようにしたい...

どうやってするか？

4

1 に答える 1

2

コードのこの部分では:

var bubble = d3.layout.pack()
  .sort()// <-- here
  .size([diameter, diameter])
  .padding(.5);

データをどのように並べ替えるかを pack() に伝えるために、比較関数を追加してみてください。それ以外の場合は、デフォルトのコンパレータが取得されます。

function comparator(a, b) {
  return a.value - b.value;
}

たとえば、単語の長さに基づいて並べ替えたい場合は、次のようにします。

function(a, b){
    return a.text.length - b.text.length;
}

ここにいくつかのドキュメントがあります

于 2014-08-06T21:53:19.330 に答える