7
我嘗試使用d3.js在單個html頁面中構建treelist和treemap。 我的treelist和treemap在個別頁面上工作正常，但我想將它們合併到單個html頁面中。在同一個html頁面上使用不同的D3版本
我面臨的問題是，對於樹形列表我使用d3.js 版本3和樹形圖我使用d3.js 版本4。所以當我嘗試將它們嵌入到單個頁面中時，存在版本衝突（它僅顯示樹形圖）。
請指導我如何解決版本衝突。
以下是我與版本3（第一COL-MD-4）和版本4（COL-MD-8）d3.js代碼
<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>
您是否獲得在Chrome控制檯任何錯誤？ –
不，我沒有收到錯誤 – Bob
這可能是因爲你的樹形圖在與treelist相同的容器中渲染。你有代碼或代碼的東西？ –