1

我正在使用本示例中的分区树来尝试对分类树进行可视化。我尝试遵循 d3.js 中的代码和 html 中的脚本。看起来 Layout 和 onclick 事件只是增加了“rect”的大小，然后将其剪辑以适应相同大小的 SVG 元素。是否可以在 x 轴上使用多线性比例，以便在深入树时将每个父节点保留在屏幕上？

例如，如果布局是 160 像素宽，每列四列是 40 像素宽。我希望树从第一列 10 像素宽开始，这使得其他列以 50 像素填充 150 像素。如果单击下一列，则域和范围将发生变化，以便左两列各为 10 像素，其他列为 70 像素，依此类推。

我尝试将范围从 ([0, 160]) 更改为 ([0, 10, 160]) 并将域更改为 ([0, .25 ,1])。这是正确的方法吗？位置改变了，但宽度没有改变。我可能想根据深度更改范围和域。

编辑 这是来自 html 脚本的代码。我正在考虑将下面的代码更改为类似

var parentcolumns = 30;
var numberleftcolumns = 0.25;
x = d3.scale.linear().domain([0, numberleftcolumns, 1]).range([0, parentcolumns, h]),

我在示例中使用的数字只是为了帮助描述问题。这里的宽度是 1120px。

<script type="text/javascript">

var w = 1120,
    h = 600,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]);


var vis = d3.select("#body").append("div")
    .attr("class", "chart")
    .style("width", w + "px")
    .style("height", h + "px")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h);

var partition = d3.layout.partition()
    .value(function(d) { return d.size; });

d3.json("http://localhost:8080/flare.json", function(root) {

console.log("loadedJson:",root);
  var g = vis.selectAll("g")
    .data(partition.nodes(root))
    .enter().append("svg:g")
    .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) +  ")"; })
  .on("click", click);

  var kx = w / root.dx,
  ky = h / 1;

  g.append("svg:rect")
      .attr("width", root.dy * kx)
      .attr("height", function(d) { return d.dx * ky; })
      .attr("class", function(d) { return d.children ? "parent" : "child"; });

  g.append("svg:text")
     .attr("transform", transform)
     .attr("dy", ".35em")
     .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0.15; })
     .text(function(d) { return d.name; })

     d3.select(window)
     .on("click", function() { click(root); })

 function click(d) {
   if (!d.children) return;

    kx = (d.y ? w - 40 : w) / (1 - d.y);
    ky = h / d.dx;
    x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
    y.domain([d.x, d.x + d.dx]);

 var t = g.transition()
    .duration(d3.event.altKey ? 7500 : 750)
    .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; });

   t.select("rect")
    .attr("width", d.dy * kx)
    .attr("height", function(d) { return d.dx * ky; });

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

 d3.event.stopPropagation();
}

function transform(d) {
return "translate(8," + d.dx * ky / 2 + ")";
   }
});

</script>

我将不得不重写 onclick 函数来处理域和范围的变化，并每次都改变我的父列。

4

0 回答 0