Question

我正在使用D3来实现分区布局的可视化。我需要的是分割的部分具有相同的宽度，如下所示：

Desired outcome

但我现在拥有的是：

Current version

您可以在Codepen上找到当前版本here，但我也在这里复制代码：

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”），自然地增加了元素的宽度，但是如何使它具有相等的分块呢？

Answer 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操作，它是你的数据生成器。

D3 - 如何使用分区布局进行可视化具有相同的扇区？

1 个答案: