我有这个json数据，我想使用d3以角度绘制树状地图。但是它没有显示数据，返回的空图表没有细分。图表未分割图表，因此无法正常工作。请帮忙。树状图带来了NAN字段，却根本不显示数据..............
[
{
"fiscalYear": 2017,
"children": [
{
"name": "OG",
"year": 2017,
"paidCount": 10,
"notPaidCount": 1
}
]
},
{
"fiscalYear": 2018,
"children": [
{
"name": LR",
"year": 2018,
"paidCount": 0,
"notPaidCount": 1
}
]
},
{
"fiscalYear": 2019,
"children": [
{
"name":LP
"year": 2019,
"paidCount": 5,
"notPaidCount": 10
},
{
"name": "HC",
"year": 2019,
"paidCount": 0,
"notPaidCount": 4
},
{
"name": "EC",
"year": 2019,
"paidCount": 0,
"notPaidCount": 5
},
{
"name": "FS",
"year": 2019,
"paidCount": 0,
"notPaidCount": 6
},
{
"year": 2019,
"paidCount": 0,
"notPaidCount": 1
},
{
"name": "OIL & GAS",
"year": 2019,
"paidCount": 0,
"notPaidCount": 2
}
]
},
{
"fiscalYear": 2011,
"children": [
{
"name": "LT",
"year": 2011,
"paidCount": 0,
"notPaidCount": 1
}
]
}
]
var root: HierarchyNode<DataResponse[]> = d3.hierarchy(this.url).sum(function(d){ return d.paidCount+d.notPaidCount+515}) // Here the size of each leave is given in the 'value' field in input data
// Then d3.treemap computes the position of each element of the hierarchy
d3.treemap()
.size([this.width, this.height])
.paddingTop(28)
.paddingRight(7)
.paddingInner(7) // Padding between each rectangle
//.paddingOuter(6)
//.padding(20)
(root);
// prepare a color scale
var color = d3.scaleOrdinal()
.domain(root.data.map(x => x.fiscalYear.toString()))
.range([ "#4B0082","#4682B4","#8B0000","#008080","#556B2F"])
// And a opacity scale
var opacity = d3.scaleLinear()
.domain([10, 50])
.range([.5,1])
// use this information to add rectangles:
this.svg
.selectAll("rect")
.data(root.leaves())
.enter()
.append("rect")
.attr('x', function (d) { return d.x0; })
.attr('y', function (d) { return d.y0; })
.attr('width', function (d) { return d.x1 - d.x0; })
.attr('height', function (d) { return d.y1 - d.y0; })
.style("stroke", "black")
.style("fill", function(d){ return color(d.data.map(x => x.fiscalYear.toString()))} )
.style("opacity", function(d){ return opacity(d.data.map(x => x.paidCount))})
// and to add the text labels
this.svg
.selectAll("text")
.data(root.leaves())
.enter()
.append("text")
.attr("x", function(d){ return d.x0+5}) // +10 to adjust position (more right)
.attr("dy", 0)//set the dy here
.attr("y", function(d){ return d.y0+5}) // +20 to adjust position (lower)
.text(function(d){ return d.data.map(x => x.paidCount)})
.call(this.wrap,1)
.attr("font-size", "20px")
.attr("fill", "white")
.on("mouseover", (d,i) => {
this.tooltip
.html(d.data.map(x => x.name)+'<br/>Paid :'+Number((d.data.map(x => x.paidCount)*100.00/(d.data.map(x => x.paidCount)+d.data.map(x => x.notPaidCount)))).toFixed(2)+'% '
+'<br/>Not Paid :'+Number((d.data.notPaidCount*100.00/(d.data.paidCount+d.data.notPaidCount))).toFixed(2)+'% ')
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px")
.style("opacity", 1)
.attr("text", 'a');
})
.on("mouseout", () => {
this.tooltip
.transition()
.duration(500)
.style("opacity", 0);
});
// and to add the text labels
this.svg
.selectAll("vals")
.data(root.leaves())
.enter()
.append("text")
.attr("x", function(d){ return d.x0+5}) // +10 to adjust position (more right)
.attr("y", function(d){ return d.y0+128}) // +20 to adjust position (lower)
.text(function(d){ return 'Paid :'+Number((d.data.map(x => x.paidCount))*100.00/(d.data.map(x => x.paidCount))+d.data.map(x => x.notPaidCount)).toFixed(2)+'% '+'('+ d.data.map(x => x.paidCount)+')' })
.attr("font-size", "14px")
.attr("font-weight", "bold")
.attr("fill", "white")
this.svg
.selectAll("vals")
.data(root.leaves())
.enter()
.append("text")
.attr("x", function(d){ return d.x0+5}) // +10 to adjust position (more right)
.attr("y", function(d){ return d.y0+144}) // +20 to adjust position (lower)
.text(function(d){ return 'Not Paid :'+Number((d.data.map(x => x.notPaidCount)*100.00)/(d.data.map(x => x.notPaidCount)+d.data.map(x => x.paidCount))).toFixed(2)+'%' +' ('+d.data.map(x => x.notPaidCount)+')' })
.attr("font-size", "14px")
.attr("font-weight", "bold")
.attr("fill", "white")
// Add title for the 3 groups
this.svg
.selectAll("titles")
.data(root.descendants().filter(function(d){return d.depth==1}))
.enter()
.append("text")
.attr("x", function(d){ return d.x0})
.attr("y", function(d){ return d.y0+21})
.html(function(d){ return '<br/>'+d.data.map(x => x.fiscalYear)+'<br/>' })
.attr("font-size", "19px")
.attr("fill", function(d){ return color(d.data.map(x => x.fiscalYear))} )
.attr("font-weight","bold")
// Add title for the groups
this.svg
.append("text")
.attr("x", 0)
.attr("y", 0) // +20 to adjust position (lower)
.text("")
.attr("font-size", "19px")
.attr("fill", "grey" )
var legendRectSize=18;
var legendSpacing=3;
var itemWidth =80;
var itemHeight = 18;
var legend = this.svg
.append("g")
.selectAll("g")
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize;
var x = 1120;
var y = i * height;
var n = 5;
return "translate(" + i%n * itemWidth + "," + Math.floor(i/n) * itemHeight + ")";
});
legend.append('rect')
.attr('width', itemWidth)
.attr('height', itemHeight)
.style('fill', this.color)
.style('stroke', this.color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; });