7
Tôi đang cố gắng xây dựng treelist và treemap trong trang html đơn bằng cách sử dụng d3.js. Treelist và treemap của tôi đang hoạt động tốt trên các trang riêng lẻ, nhưng tôi muốn kết hợp chúng vào trang html đơn.Sử dụng các phiên bản D3 khác nhau trên cùng một trang html
Vấn đề tôi đang phải đối mặt là, cho TreeList tôi đang sử dụng d3.js phiên bản 3 và cho treemap tôi đang sử dụng d3.js phiên bản 4. Vì vậy, khi tôi cố gắng để nhúng chúng vào trang duy nhất của tôi có xung đột phiên bản (nó chỉ cho thấy treemap).
Vui lòng hướng dẫn cho tôi cách tôi giải quyết xung đột phiên bản.
Tiếp theo là mã d3.js của tôi với phiên bản 3 (lần đầu tiên col-md-4) và phiên bản 4 (col-md-8)
<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="row">
<div class="col-md-4">
<div id="treelisttest" style="height:500px;"> </div>
<script>
var id = 0;
d3.json("data.json", function (err, data) {
var tree = d3.layout.treelist()
.childIndent(10)
.nodeHeight(30);
var ul = d3.select("#treelisttest").append("ul").classed("treelist", "true");
function render(data, parent) {
var nodes = tree.nodes(data),
duration = 250;
function toggleChildren(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else if (d._children) {
d.children = d._children;
d._children = null;
}
}
var nodeEls = ul.selectAll("li.node").data(nodes, function (d) {
d.id = d.id || ++id;
return d.id;
});
var entered = nodeEls.enter().append("li").classed("node", true)
.style("top", parent.y + "px")
.style("opacity", 0)
.style("height", tree.nodeHeight() + "px")
.on("click", function (d) {
toggleChildren(d);
render(parent, d);
})
.on("mouseover", function (d) {
d3.select(this).classed("selected", true);
})
.on("mouseout", function (d) {
d3.selectAll(".selected").classed("selected", false);
});
entered.append("span").attr("class", function (d) {
var icon = d.children ? " glyphicon-chevron-down"
: d._children ? "glyphicon-chevron-right" : "";
return "caret glyphicon " + icon;
});
entered.append("span").attr("class", function (d) {
var icon = d.children || d._children ? "glyphicon-folder-close"
: "glyphicon-file";
return "glyphicon " + icon;
});
entered.append("span").attr("class", "filename")
.html(function (d) { return d.name.substring(0, 5) });
nodeEls.select("span.caret").attr("class", function (d) {
var icon = d.children ? " glyphicon-chevron-down"
: d._children ? "glyphicon-chevron-right" : "";
return "caret glyphicon " + icon;
});
nodeEls.transition().duration(duration)
.style("top", function (d) { return (d.y - tree.nodeHeight()) + "px"; })
.style("left", function (d) { return d.x + "px"; })
.style("opacity", 1);
nodeEls.exit().remove();
}
render(data, data);
});
</script>
</div>
<div class="col-md-8">
<div id="maptest">
<script src="http://d3js.org/d4.v3.min.js"></script>
<svg width="500" height="1000"></svg>
<script src="d3.v4.min.js"></script>
<script>
var svg = d3.select("#maptest")
.append("svg")
.attr("width", "100%")
.attr("height", "50%")
.call(d3.zoom().on("zoom", function() {
svg.attr("transform", d3.event.transform)
}))
.append("g")
var treemap = d3.treemap()
.tile(d3.treemapResquarify)
.size([1000, 1000])
.round(true)
.paddingInner(1);
d3.json("data.json", function (error, data) {
if (error) throw error;
var root = d3.hierarchy(data)
.sum(sumBySize)
treemap(root);
var cell = svg.selectAll("g")
.data(root.leaves())
.enter().append("g")
.attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
cell.append("rect")
.attr("id", function (d) { return d.data.id; })
.attr("width", function (d) { return d.x1 - d.x0; })
.attr("height", function (d) { return d.y1 - d.y0; })
.attr("fill", function (d) { return color(d.data.value); });
cell.append("clipPath")
.attr("id", function (d) { return "clip-" + d.data.id; })
.append("use")
.attr("xlink:href", function (d) { return "#" + d.data.id; });
cell.append("text")
.attr("dy", ".75em")
.text(function (d) { return d.data.name.substring(0, 1); })
cell.append("title")
.text(function (d) { return d.data.id + " with name " + d.data.name });
});
function sumByCount(d) {
return d.children ? 0 : 1;
}
function sumBySize(d) {
return d.value;
}
</script>
</div>
</div>
</div>
Bạn có nhận được bất kỳ sai sót trong chrome console? –
không có i am không nhận được lỗi – Bob
Nó có thể là treemap của bạn được dựng hình trong cùng một container như treelist. Bạn có một codepen hoặc một cái gì đó với mã? –