【问题标题】:d3.js partition.nodes(root) does not set the nodes x or dx valuesd3.js partition.nodes(root) 不设置节点 x 或 dx 值
【发布时间】:2016-03-31 19:44:19
【问题描述】:

我正在尝试使用 d3.js 使用 .json 文件中的数据创建一个冰柱树。我遇到的问题是分区节点的 x 和 dx 属性始终设置为 0。我希望 x 和 dx 值将根据相同深度的节点数进行设置。例如。在下面的示例中,女性和男性的 dx 为 0.5,他们的孩子的 dx 为 0.25 我可能做出了不正确的假设,因为这对我来说是一个新话题。我希望能深入了解为什么这些值始终为 0,或者如何按照我的预期设置这些值。

data.json文件内容为:

{
 "name": "Segment",
 "children": [
  {
   "name": "women",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "recency: >3months", "size": 3938},
      {"name": "recency: between 3 and 6months", "size": 3812}
     ]
    },
    {
     "name": "men",
     "children": [
      {"name": "recency: >3months", "size": 3534},
      {"name": "recency: between 3 and 6months", "size": 5731}
     ]
    }
   ]
  }
 ]
}

我正在使用以下代码为 d3.layout.partition() 设置数据:

var partition = d3.layout.partition()
 //   .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
    .value(function(d) { return d.value; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var rect = svg.selectAll("rect");

d3.json("data.json", function(error, root) {
  if (error) throw error;
  rect = rect
      .data(partition.nodes(root))
    .enter().append("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.value); })//d.children ? d : d.parent).key()
      .on("click", clicked);
});

function clicked(d) {
  x.domain([d.x, d.x + d.dx]);
  y.domain([d.y, 1]).range([d.y ? 20 : 0, height]);

【问题讨论】:

    标签: javascript json node.js d3.js


    【解决方案1】:

    DoH 我想通了。我将 json 文件中的单词大小更改为 value,现在正在设置 x 和 dx 值。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-09-30
      • 2013-08-20
      • 2020-04-05
      • 2018-12-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多