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

您告诉分区函数将每个块的宽度计算为值（如果有的话）或其子值的总和。听起来您想在后一种情况下使用子节点的数量作为权重，例如，顶部节点被拆分为 1/2 和 1/2 而不是 4/7 和 3/7。

编辑： 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 回答