javascript - d3 サークル パック: サークルの色の設定

Question

http://mbostock.github.com/d3/ex/bubble.htmlを使用しようとしています が、色が変更されています。

d3.layout.pack で色がどのように設定されているかを知りたいです。

Answer 1

あなたが言及した例では、円の色はここで定義されています：

.style("fill", function(d) { return fill(d.packageName); });

dこれが、円にバインドされたデータです。
この例では、色の代わりに、関数はオブジェクト（のpackageName属性d）を渡します。
各オブジェクトには、選択したカラースケールに従って、独自の色が割り当てられます。

fill = d3.scale.category20c();

使用されている色付けの基準（packageName）に満足していて、色を変更するだけでよい場合は、パレット（カラースケール）を変更できます： https
：//github.com/mbostock/d3/wiki/Ordinal-Scales

色付け基準を変更したい場合は、戻り部分を変更して、データの関数としての色の値に置き換える必要がありますd。

ここでD3カラーコンストラクターを見つけることができます：
https ：//github.com/mbostock/d3/wiki/Colors

Answer 2

データの json ファイルを変更し、d3 コードを微調整して、個々のバブルを塗りつぶす色を指定できます。

以下は私のデータで、バブルを塗りつぶす色を指定していることがわかります。

{
  "name": "sentiment",
  "children": [
    {
      "name": "positive",
      "children": [
        {
          "name": "iphone", "size": 2000, "color": "green"
        }
      ]
    }
  ]
}

次に、指定した色属性をノード オブジェクトに追加して、後で d3 関数でアクセスできるようにします。

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,
    color: node.color
  });
}

次に、泡の色付けを担当する関数を見つけて、塗りつぶし関数を編集します。

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

私のコードは、http://bl.ocks.org/mbostock/4063269にあるコードから編集されています。