Question

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

例如，如果布局宽度为160px，则每列的四列宽度为40px。我希望树从10px宽的第一列开始，这使得其他的每个填充150px，每个50px。如果单击下一列，则域和范围将发生变化，因此左侧2列的每列为10px，其他列为70px等。

我尝试将范围从（[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函数来处理域和范围更改并每次更改我的父列。

分区树中的D3折线图比例

0 个答案: