Question

我正在尝试实现分区布局并让用户决定值函数。单选按钮标记当前使用的属性，该属性将传递给值函数。

Mike Bostock的工作实施（针对森伯斯特）在这里： http://bl.ocks.org/mbostock/4063423

我的示例（请参阅JSFiddle：http://jsfiddle.net/ee2todev/3tsogbz6/）尝试遵循该实现但出现问题：单选按钮上的第一个更改似乎很好，但第二次单击单选按钮会导致错误的结果。为了更好地看出出了什么问题，我对留下叶子的叶子进行了颜色编码（在右侧）。

在设置新值函数后，我缺少的点必须在更新/转换中：

  d3.selectAll("input").on("change", function change() {
    var value;

    switch(this.value) {
      case "count":
        value = function() { return 1; }
        break;
      case "size1":
        value = function(d) { return d.values.size1; };
        break;
      case "size2":
        value = function(d) { return d.values.size2; };
        break;
    }

    d3.selectAll("g.main")
        .data(partition.value(value).nodes(root))
      .transition();
    console.log(root);  
  });

任何帮助都非常感谢

**更新** 即使第一次单击单选按钮似乎也会产生错误的结果。我一定错过了简单的事情！？...

Answer 1

每次在选择上调用.data（）时，数据模型和DOM元素之间的映射都会发生变化。因此，这意味着，所有属性都需要在点击功能中更新

    t.select("rect")
        .attr("width", d.dy * kx)
        .attr("height", function(d) { return d.dx * ky; })
        .attr("class", function(d) { return d.children ? "innerNode" : "leaf"; });

    t.select("text")
        .attr("transform", transform)
        .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
        .text(function(d) { return d.key; });

注意我已经设置了矩形的类和文本元素的文本。

以下是工作版本：http://jsfiddle.net/4v62v9g3/

具有不同值函数的分区布局

1 个答案: