1

D3を使用して、パーティションレイアウトで視覚化を実現しています。私が必要としているのは、次のように、分割されたセクションの幅が同じであるということです。

望ましい結果

しかし、私が現在持っているのはこれです：

現行版

現在のバージョンはCodepenで動作していることがわかりますが、ここでもコードをコピーします。

var w = 960,
    h = 500,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]),
    color = d3.scale.ordinal().range(["rgb(255,247,236)","rgb(254,232,200)","rgb(253,212,158)","rgb(253,187,132)","rgb(252,141,89)","rgb(239,101,72)","rgb(215,48,31)","rgb(179,0,0)","rgb(127,0,0)"]);

var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

var partition = d3.layout.partition()
    .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
    .value(function(d) { return d.value; });

var data = {
  'root': {

    'asdf': {
      'a': {
        'kdjfklsfj': 1,
        'kdjfklsfsj': 1
      },
      'b': 1
    },

    'bnm': {
      'c': 1,
      'd': {
        'lsdkjfdkljsf': {
          'lsdkfj': 1,
          'kldsjfdlk': 1
        },
        'kdjfkjsdfk': 1
      }
    }

  }
};

var rect = vis.selectAll("rect")
    .data(partition(d3.entries(data)[0]))
    .enter().append("svg:rect")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y); })
    .attr("width", function(d) { return x(d.dx); })
    .attr("height", function(d) { return y(d.dy); })
    .attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); })
    .on("click", click);

function click(d) {
  x.domain([d.x, d.x + d.dx]);
  y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);

  rect.transition()
    .duration(750)
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y); })
    .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
    .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
}

私が見つけたのは、データ値を変更すると（現在、すべてのアイテムの値が「1」）、要素の幅が自然に大きくなることですが、ボックスを均等に分割するにはどうすればよいですか？

4

1 に答える 1

1

各ブロックの幅を値（存在する場合）またはその子の値の合計として計算するようにパーティション関数に指示しています。後者の場合、子の数を重みとして使用したいようです。たとえば、最上位ノードが4/7と3/7ではなく1/2と1/2に分割されます。

編集： d3のpartition（）オブジェクトは、子のサイズの合計に基づいて親要素のサイズを決定するように設計されていますが、（ユースケースを理解している場合）子のサイズを兄弟の数に基づく、親のサイズ。

これを機能させるには、リーフノードオブジェクトの値を管理して、d3を「だまして」やりたいことを実行する必要があります。dataこれは、最初のレベルが均等な長さになるオブジェクトです。

var data = {
  'root': {

    'asdf': {
      'a': {
        'kdjfklsfj': 1/6,
        'kdjfklsfsj': 1/6
      },
      'b': 1/6
     },

    'bnm': {
      'c': 1/8,
      'd': {
        'lsdkjfdkljsf': {
          'lsdkfj': 1/8,
          'kldsjfdlk': 1/8
        },
        'kdjfkjsdfk': 1/8
      }
    }
  }
};

つまり、d3の期待に合うようにデータを管理する必要があります。これを行うのはd3操作ではなく、データジェネレーターです。

于 2012-08-23T23:01:43.660 に答える