我正在尝试制作多个基于D3的树形图，但树形图仅在最后一个div元素的位置生成（假设我正在为＃chart1，＃chart2和＃chart3绘图，但只有一个树形图也在生成位置＃chart3），但只有第一张图表的数据。我正在粘贴不同div id的两段代码
chart1
<script type="text/javascript">
var margin = {top: 10, right: 10, bottom: 10, left: -40},
width = 250 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var color = d3.scale.category10();
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function(d) { return d.credit; });
var div = d3.select("#chart1").append("div")
.style("position1", "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("sem1.json", function(error, root1) {
if (error) throw error;
var node = div.datum(root1).selectAll(".node")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "node")
.call(position1)
.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(position1);
});
});
function position1() {
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>
和 chart2
<script type="text/javascript">
var margin = {top: 10, right: 10, bottom: 10, left: -40},
width = 220 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var color = d3.scale.category10();
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function(d) { return d.credit; });
var div = d3.select("#chart2").append("div")
.style("position2", "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("sem2.json", function(error, root2) {
if (error) throw error;
var node = div.datum(root2).selectAll(".node")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "node")
.call(position2)
.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(position2);
});
});
function position2() {
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>
元素的定位存在一些问题，并尝试使用两个不同的位置函数更改为position1和position2。
答案 0 :(得分：1)
在上述推荐之后，这是正确的：
<强> chart1
<script type="text/javascript">
var margin = {top: 10, right: 10, bottom: 10, left: -40},
width = 220 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var color = d3.scale.category10();
var treemap1 = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function(d) { return d.credit; });
var div1 = d3.select("#chart6").append("div")
.style("position1", "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("sem1.json", function(error, root1) {
if (error) throw error;
var node = div1.datum(root1).selectAll(".node")
.data(treemap1.nodes)
.enter().append("div")
.attr("class", "node")
.call(position1)
.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(treemap1.value(value).nodes)
.transition()
.duration(1500)
.call(position1);
});
});
function position1() {
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>
<强> chart2
<script type="text/javascript">
var margin = {top: 10, right: 10, bottom: 10, left: -40},
width = 220 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var color = d3.scale.category10();
var treemap2 = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function(d) { return d.credit; });
var div2 = d3.select("#chart7").append("div")
.style("position2", "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("sem2.json", function(error, root2) {
if (error) throw error;
var node = div2.datum(root2).selectAll(".node")
.data(treemap2.nodes)
.enter().append("div")
.attr("class", "node")
.call(position2)
.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(treemap2.value(value).nodes)
.transition()
.duration(1500)
.call(position2);
});
});
function position2() {
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>