【发布时间】：2018-02-19 13:36:31
【问题描述】：
我正在尝试按照https://bl.ocks.org/denjn5/3b74baf5edc4ac93d5e487136481c601 上的 3 部分教程制作一个阳光明媚，我的 json 包含基于国家和产品部门的销售信息。我试图在基于国家/地区的第一层销售和基于产品部门的第二层销售中展示。我的 Json 文件如下所示：
{ “国家”：“全部”， “分享”：[ { “国家”：“在”， “分享”：[ { “产品部门”：“配件”， “标签”：53222 }, { “产品部门”：“服装”， “标签”：365712 }, { “产品部门”：“鞋类”， “标签”：523684 } ] }, { “国家”：“是”， “分享”：[ { “产品部门”：“配件”， “标签”：57522 }, { “产品部门”：“服装”， “标签”：598712 }, { “产品部门”：“鞋类”， “标签”：52284 } ] }, { “国家”：“德国”， “分享”：[ { “产品部门”：“配件”， “标签”：56982 }, { “产品部门”：“服装”， “标签”：55312 }, { “产品部门”：“鞋类”， “标签”：67284 } ] }, { “国家”：“法国”， “分享”：[ { “产品部门”：“配件”， “标签”：5862 }, { “产品部门”：“服装”， “标签”：45312 }, { “产品部门”：“鞋类”， “标签”：26284 } ] } ] }这个 json 文件的名称是 kpiDrillDown2.json，我在我的代码中使用 d3.json() 调用它。我对代码进行了细微更改以适用于我的数据。代码如下：
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway');
body {
font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg></svg>
<script>
//initialize variables
var width = 500;
var height = 500;
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal(d3.schemeCategory20b);
//setting up svg workspace
var g = d3.select('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
//formatting the data
var partition = d3.partition()
.size([2 * Math.PI, radius]);
function draw(nodeData){
debugger;
//finding the root node
var root = d3.hierarchy(nodeData)
.sum(function (d) { return d.label});
//calculating each arc
partition(root);
var arc = d3.arc()
.startAngle(function (d) { return d.x0; })
.endAngle(function (d) { return d.x1; })
.innerRadius(function (d) { return d.y0; })
.outerRadius(function (d) { return d.y1; });
g.selectAll('g')
.data(root.descendants())
.enter()
.append('g')
.attr("class", "node")
.append('path')
.attr("display", function (d) { return d.depth ? null : "none"; })
.attr("d", arc)
.style('stroke', '#fff')
.style("fill", function (d) { return color((d.parent ? d : d.parent).data.productdivision); })
g.selectAll(".node")
.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
.attr("dx", "-20")
.attr("dy", ".5em")
.text(function(d) { return d.parent ? d.data.productdivision : "" });
function computeTextRotation(d) {
var angle = (d.x0 + d.x1) / Math.PI * 90;
// Avoid upside-down labels
return (angle < 90 || angle > 270) ? angle : angle + 180;
}
}
d3.json('kpiDrillDown3.json', draw);
</script>
</body>
</html>
我在绘图函数中放置了一个调试器来检查根元素。 Root 没有孩子。这是我在控制台看到的：
当我继续时，它给了我错误：“无法读取 null 的属性‘数据’”。如控制台所示，root 没有孩子。我的问题是，我是否需要更改我的 json 数据格式以使 root 识别孩子，或者我做错了什么。我是 d3js 的新手，基本上通过获取源代码并对其进行修改，我正在努力。这是控制台中的错误：
感谢您的帮助，非常感谢。
【问题讨论】：