Question

<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<title>My treemap</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

</head>
<style>

body {
  font: 10px sans-serif;
  position: relative;
}

.node {
  box-sizing: border-box;
  line-height: 1em;
  overflow: hidden;
  position: absolute;
  white-space: pre;
  background: #ddd;
}

.node-label,
.node-value {
  margin: 4px;
}

.node-value {
  margin-top: -2px;
}

.node-value {
  font-weight: bold;
}
</style>
<body>
<svg width="1000" height="1000">
    <g></g>
  </svg>
  <script>
const margin = {top: 40, right: 10, bottom: 10, left: 10};
   var   width = 960 - margin.left - margin.right;
   var   height = 960 - margin.top - margin.bottom;
   var 	 color = d3.scaleOrdinal().range(d3.schemeCategory20b);
  	var treemap = d3.treemap()
	    .size([width, height])
	    .padding(1)
	    .round(true);
  	var json_data=d3.json("https://raw.githubusercontent.com/vega/vega/master/docs/data/cars.json", function(error, data) {
 	 if (error) throw error;
 	 	var nested_data = d3.nest()
 	 	.key(function(d) { return d.Origin; })
 	 	.key(function(d) { return d.Cylinders; })
 	 	.key(function(d) { return d.Miles_per_Gallon; })
 	 	.rollup(function(leaves){return {"value" : leaves.length}
 	 	})
 	 	.entries(data);
 	 	console.log(nested_data);
 	 	var root = d3.hierarchy(nested_data);
 	 	root.sum(function(d) {
 	 		return d.value;})

        treemap(root);
        var nodes = d3.select('svg g')
          .selectAll('g')
          .data(root.descendants())
          .enter()
          .append('g')
          .attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})

        nodes
          .append('rect')
          .attr('width', function(d) { return (d.x1 - d.x0)*10; })
          .attr('height', function(d) { return (d.y1 - d.y0)*10; })
          .attr('fill', function(d){ return color(d.data.key);
          })

        nodes
          .append('text')
          .text(function(d) {
            return d.data.key;})


		
 	 });
 	
  </script>
</body>

我试图从非分层数据结构（示例cars.json数据结构）创建树形图。现在我很困惑，为什么我的代码在浏览器上不显示任何内容。我在将嵌套键和值附加到树的根和节点时遇到了麻烦。有人可以向我解释一下吗？另外，您能告诉我代码有什么问题吗？

Answer 1

您的代码即将完成；唯一缺少的是您需要在层次结构中添加一个伪根节点，为子节点指定访问器，并修复叶节点的值，而叶节点具有一层额外的嵌套层，需要删除。 / p>

叶节点值：

var nested_data = d3.nest()
[...]
.rollup(function(leaves) {
  return {
    value: leaves.length
  }
})
.entries(data);

导致叶子节点如下：

{ value: { value: 5 } }

从value:通话中删除多余的rollup：

var nested_data = d3.nest()
[...]
.rollup(function(leaves) {
  return leaves.length
})
.entries(data);

现在您的叶子节点如下所示：

{ value: 5 }

假根节点

通过添加假根，确保所有嵌套数据都收集在同一层次结构中：

d3.hierarchy({ values: nested_data })

子节点访问器

指定子项的访问器，否则d3将寻找x.children，如果不存在，则假定该节点是叶子：

d3.hierarchy({ value: nested_data }, function(d) { return d.values })

结果：

const margin = {
  top: 40,
  right: 10,
  bottom: 10,
  left: 10
};
var width = 960 - margin.left - margin.right;
var height = 960 - margin.top - margin.bottom;
var color = d3.scaleOrdinal().range(d3.schemeCategory20b);
var treemap = d3.treemap()
  .size([width, height])
  .padding(1)
  .round(true);
var json_data = d3.json("https://raw.githubusercontent.com/vega/vega/master/docs/data/cars.json", function(error, data) {
  if (error) throw error;
  var nested_data = d3.nest()
    .key(function(d) {
      return d.Origin;
    })
    .key(function(d) {
      return d.Cylinders;
    })
    .key(function(d) {
      return d.Miles_per_Gallon;
    })
    .rollup(function(leaves) {
      return leaves.length
    })
    .entries(data);

  var root = d3.hierarchy({
      values: nested_data
    }, d => d.values)
    .sum(function(d) {
      return d.value;
    })

  treemap(root);
  var nodes = d3.select('svg g')
    .selectAll('g')
    .data(root.descendants())
    .enter()
    .append('g')
    .attr('transform', function(d) {
      return 'translate(' + [d.x0, d.y0] + ')'
    })

  nodes
    .append('rect')
    .attr('width', function(d) {
      return (d.x1 - d.x0) * 10;
    })
    .attr('height', function(d) {
      return (d.y1 - d.y0) * 10;
    })
    .attr('fill', function(d) {
      return color(d.data.key);
    })

  nodes
    .append('text')
    .text(function(d) {
      return d.data.key;
    })
});

body {
  font: 10px sans-serif;
  position: relative;
}

.node {
  box-sizing: border-box;
  line-height: 1em;
  overflow: hidden;
  position: absolute;
  white-space: pre;
  background: #ddd;
}

.node-label,
.node-value {
  margin: 4px;
}

.node-value {
  margin-top: -2px;
}

.node-value {
  font-weight: bold;
}

<title>My treemap</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

<svg width="1000" height="1000">
    <g></g>
  </svg>

使用d3.nest的D3树形图json实现

1 个答案:

叶节点值：

假根节点

子节点访问器