Javascript D3.js-Treemap图：如何使用继承权与flare.json中提供的不同的json
我正在寻找一个解决方案，使用d3.js将下面的json实现到treemap中 我使用的代码是：Javascript D3.js-Treemap图：如何使用继承权与flare.json中提供的不同的json,javascript,jquery,json,ajax,d3.js,Javascript,Jquery,Json,Ajax,D3.js,我正在寻找一个解决方案，使用d3.js将下面的json实现到treemap中 我使用的代码是： <!DOCTYPE html> <meta charset="utf-8"> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: auto; position: relative; width: 960px; } form {
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
</style>
<form>
<label><input type="radio" name="mode" value="size" checked> Size</label>
<label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="file:///home/harsha/Downloads/test.json"></script>
<script>
var margin = {top: 40, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var color = d3.scale.category20c();
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function(d) { return d.size; });
var div = d3.select("body").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
d3.json("test.json", function(error, root) {
if (error) throw error;
var node = div.datum(root).selectAll(".node")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "node")
.call(position)
.style("background", function(d) { return d.children ? color(d.name) : null; })
.text(function(d) { return d.children ? null : d.name; });
d3.selectAll("input").on("change", function change() {
var value = this.value === "count"
? function() { return 1; }
: function(d) { return d.size; };
node
.data(treemap.value(value).nodes)
.transition()
.duration(1500)
.call(position);
});
});
function position() {
this.style("left", function(d) { return d.x + "px"; })
.style("top", function(d) { return d.y + "px"; })
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
</script>
您的JSON似乎有错误扫描您请详细说明JSON错误，因为我是d3新手，我的csv有3列：-行业类型、机会和金额，要求创建一个树状图，如：-“按有无或损失放置文件或单选按钮第一级应按行业按金额向下钻取机会类型按金额”您的JSON似乎有错误扫描您请详细说明JSON错误，因为我是d3新手，我的csv有3列：-行业类型、机会和金额，要求创建一个树状图，如：-“按有无或损失放置文件或单选按钮第一级应按行业按金额向下钻取机会类型按金额”
{
"name" : "Retail",
"children" : [{
"name" : "Services",
"size" : 504
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Services",
"size" : 611352
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 33496
}]
},
{
"name" : "Manufacturing",
"children" : [{
"name" : "Maintenance",
"size" : 588
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 9240
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 5488
}]
},
{
"name" : "Retail",
"children" : [{
"name" : "Software",
"size" : 27104
}]
},
{
"name" : "Storage",
"children" : [{
"name" : "Software",
"size" : 9296
}]
},
{
"name" : "Financial Services",
"children" : [{
"name" : "Services",
"size" : 1491
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 2400
}]
},
{
"name" : "Distribution",
"children" : [{
"name" : "Software",
"size" : 3840
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 12160
}]
},
{
"name" : "Entertainment",
"children" : [{
"name" : "Services",
"size" : 1218
}]
},
{
"name" : "Entertainment",
"children" : [{
"name" : "Software",
"size" : 6264
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 14976
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Software",
"size" : 25760
}]
},
{
"name" : "Telecommunication",
"children" : [{
"name" : "Services",
"size" : 10374
}]
},
{
"name" : "Recreation",
"children" : [{
"name" : "Maintenance",
"size" : 823.2
}]
},
{
"name" : "Financial Services",
"children" : [{
"name" : "Software",
"size" : 6408
}]
},
{
"name" : "Financial Services",
"children" : [{
"name" : "Maintenance",
"size" : 1892.4
}]
},
{
"name" : "Healthcare",
"children" : [{
"name" : "Software",
"size" : 4864
}]
},
{
"name" : "Financial Services",
"children" : [{
"name" : "Software",
"size" : 11696
}]
},
{
"name" : "Financial Services",
"children" : [{
"name" : "Software",
"size" : 3440
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 107136
}]
},
{
"name" : "Distribution",
"children" : [{
"name" : "Software",
"size" : 680
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Maintenance",
"size" : 2995.2
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 6160
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 28224
}]
},
{
"name" : "Telecommunication",
"children" : [{
"name" : "Software",
"size" : 784
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 89544
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 10640
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Software",
"size" : 680
}]
},
{
"name" : "Healthcare",
"children" : [{
"name" : "Software",
"size" : 25896
}]
},
{
"name" : "Manufacturing",
"children" : [{
"name" : "Services",
"size" : 2324
}]
},
{
"name" : "Financial Services",
"children" : [{
"name" : "Software",
"size" : 21280
}]
},
{
"name" : "Healthcare",
"children" : [{
"name" : "Software",
"size" : 1404
}]
},
{
"name" : "Services",
"children" : [{
"name" : "Software",
"size" : 11664
}]
},
{
"name" : "Healthcare",
"children" : [{
"name" : "Software",
"size" : 23120
}]
},
{
"name" : "Tobacco",
"children" : [{
"name" : "Software",
"size" : 5760
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Software",
"size" : 8064
}]
},
{
"name" : "Retail",
"children" : [{
"name" : "Software",
"size" : 224960
}]
},
{
"name" : "Financial Services",
"children" : [{
"name" : "Maintenance",
"size" : 1155
}]
},
{
"name" : "Automotives",
"children" : [{
"name" : "Software",
"size" : 34592
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Maintenance",
"size" : 1651.2
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Software",
"size" : 10920
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Maintenance",
"size" : 142.5
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Software",
"size" : 10920
}]
},
{
"name" : "Communication",
"children" : [{
"name" : "Software",
"size" : 2560
}]
},
{
"name" : "Oil & Gas",
"children" : [{
"name" : "Software",
"size" : 180048
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 1248
}]
},
{
"name" : "Healthcare",
"children" : [{
"name" : "Software",
"size" : 10976
}]
},
{
"name" : "Computer Software",
"children" : [{
"name" : "Software",
"size" : 2160
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Software",
"size" : 1704
}]
},
{
"name" : "Oil & Gas",
"children" : [{
"name" : "Software",
"size" : 4416
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 10200
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Services",
"size" : 1386
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 38800
}]
},
{
"name" : "Pharmaceutical",
"children" : [{
"name" : "Maintenance",
"size" : 1296
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 22707
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Services",
"size" : 1701
}]
},
{
"name" : "Financial Services",
"children" : [{
"name" : "Software",
"size" : 3840
}]
},
{
"name" : "Retail",
"children" : [{
"name" : "Maintenance",
"size" : 1778.4
}]
},
{
"name" : "Telecommunication",
"children" : [{
"name" : "Software",
"size" : 63984
}]
},
{
"name" : "Healthcare",
"children" : [{
"name" : "Software",
"size" : 13509
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Software",
"size" : 7440
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 311808
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 2280
}]
},
{
"name" : "Healthcare",
"children" : [{
"name" : "Software",
"size" : 768
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Maintenance",
"size" : 1036.8
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 2280
}]
},
{
"name" : "Recreation",
"children" : [{
"name" : "Software",
"size" : 133407
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Software",
"size" : 52688
}]
},
{
"name" : "Communication",
"children" : [{
"name" : "Software",
"size" : 1488
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Services",
"size" : 5607
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 648
}]
},
{
"name" : "Communication",
"children" : [{
"name" : "Services",
"size" : 2960
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 6408
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 10296
}]
},
{
"name" : "Manufacturing",
"children" : [{
"name" : "Maintenance",
"size" : 2295
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Maintenance",
"size" : 1008
}]
},
{
"name" : "Distribution",
"children" : [{
"name" : "Software",
"size" : 3200
}]
},
{
"name" : "Financial Services",
"children" : [{
"name" : "Software",
"size" : 1968
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Services",
"size" : 23520
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Software",
"size" : 9184
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 4648
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Services",
"size" : 1743
}]
},
{
"name" : "Manufacturing",
"children" : [{
"name" : "Services",
"size" : 1344
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Software",
"size" : 704
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 1248
}]
},
{
"name" : "Construction",
"children" : [{
"name" : "Services",
"size" : 1932
}]
},
{
"name" : "Healthcare",
"children" : [{
"name" : "Maintenance",
"size" : 2592
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Maintenance",
"size" : 5011.2
}]
},
{
"name" : "Distribution",
"children" : [{
"name" : "Software",
"size" : 2208
}]
},
{
"name" : "Communication",
"children" : [{
"name" : "Software",
"size" : 37696
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Software",
"size" : 11076
}]
},
{
"name" : "Healthcare",
"children" : [{
"name" : "Software",
"size" : 27824
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 4851
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Maintenance",
"size" : 1932
}]
},
{
"name" : "Entertainment",
"children" : [{
"name" : "Maintenance",
"size" : 199.2
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 29008
}]
},
{
"name" : "Oil & Gas",
"children" : [{
"name" : "Software",
"size" : 5460
}]
},
{
"name" : "Pharmaceutical",
"children" : [{
"name" : "Software",
"size" : 14400
}]
},
{
"name" : "Recreation",
"children" : [{
"name" : "Services",
"size" : 9856
}]
},
{
"name" : "Distribution",
"children" : [{
"name" : "Software",
"size" : 12160
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 28616
}]
},
{
"name" : "Financial Services",
"children" : [{
"name" : "Software",
"size" : 8112
}]
},
{
"name" : "Entertainment",
"children" : [{
"name" : "Services",
"size" : 71760
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Software",
"size" : 6720
}]
},
{
"name" : "Services",
"children" : [{
"name" : "Software",
"size" : 38016
}]
},
{
"name" : "Manufacturing",
"children" : [{
"name" : "Software",
"size" : 10296
}]
},
{
"name" : "Entertainment",
"children" : [{
"name" : "Maintenance",
"size" : 2308.5
}]
},
{
"name" : "Manufacturing",
"children" : [{
"name" : "Software",
"size" : 10528
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Software",
"size" : 2772
}]
},
{
"name" : "Distribution",
"children" : [{
"name" : "Software",
"size" : 6912
}]
},
{
"name" : "Retail",
"children" : [{
"name" : "Software",
"size" : 2040
}]
},
{
"name" : "Retail",
"children" : [{
"name" : "Services",
"size" : 236880
}]
},
{
"name" : "Computer Software",
"children" : [{
"name" : "Software",
"size" : 36192
}]
},
{
"name" : "Computer Hardware",
"children" : [{
"name" : "Software",
"size" : 1312
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Services",
"size" : 658
}]
},
{
"name" : "Financial Services",
"children" : [{
"name" : "Software",
"size" : 10920
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Software",
"size" : 5760
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Services",
"size" : 5418
}]
},
{
"name" : "Telecommunication",
"children" : [{
"name" : "Software",
"size" : 3920
}]
},
{
"name" : "Manufacturing",
"children" : [{
"name" : "Software",
"size" : 11560
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Software",
"size" : 702
}]
},
{
"name" : "Business Services",
"children" : [{
"name" : "Services",
"size" : 1800
}]
},
{
"name" : "Technology",
"children" : [{
"name" : "Maintenance",
"size" : 196.8
}]
},
{
"name" : "Insurance",
"children" : [{
"name" : "Software",
"size" : 6016
}]
},
{
"name" : "Transportation",
"children" : [{
"name" : "Software",
"size" : 11076
}]
}
]
}