私は、各用語が独自のカテゴリまたはクラスを持つことに依存する D3 タグ クラウドのインタラクティブな実装に取り組んでいます。d3.layout.cloud.js を次のように変更することで、用語にカテゴリ属性を含めることができました。
cloud.start = function() {
var board = zeroArray((size[0] >> 5) * size[1]),
bounds = null,
n = words.length,
i = -1,
tags = [],
data = words.map(function(d, i) {
return {
// Added by me
epidem_category: d['epidem_category'],
other_details: d['other_details'],
id: d['id'],
///////
text: text.call(this, d, i),
size: ~~fontSize.call(this, d, i),
font: font.call(this, d, i),
rotate: rotate.call(this, d, i),
padding: cloudPadding.call(this, d, i)
};
}).sort(function(a, b) { return b.size - a.size; });
d.epidem_category雲を描画するときと同様d.idに、特定のカテゴリに異なる塗りつぶし色または回転値を与えるためにアクセスできるようになりました。
canvas
.selectAll("text")
.data(words)
.enter()
.append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", 'Gentium Book Basic')
.style("fill", function(d, i) { return entity_cloud.set_color(d.epidem_category);})
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + entity_cloud.set_rotation(d.epidem_category) ")";
})
.attr("class", function(d) { return d.epidem_category })
.attr("id", function(d, i) { return d.id })
.text(function(d) { return d.text; })
私の問題は、単語の配置も制御したいということです。同じカテゴリのすべての用語がクラウドにまとめて表示されるようにしたいと考えています。Jason Davies のタグ クラウド デモ ページで説明されているアルゴリズムを前提として、入力配列をカテゴリ別に並べ替えることで、これを制御できるのではないかと考えました。
開始点に単語を配置してみてください。通常は中央付近、または中央の水平線上のどこかに配置します。
.. その論理により、最初の 10 個の単語が同じカテゴリに属している場合、それらは中間のどこかにまとめて表示され、他のカテゴリは円形のパターンに従います。ただし、これをテストしても、期待した結果は得られませんでした。実際、レイアウトの変更はほとんど見られませんでした。
何らかの属性に基づいて用語がまとめられているレイアウトを実現する方法について、誰かアイデアはありますか?