在同一个html页面上使用不同的D3版本 [英] Using different D3 versions on same html page
本文介绍了在同一个html页面上使用不同的D3版本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试使用d3.js在单个html页面中构建treelist和treemap。
我的trereeist和treemap在各个页面上工作正常，但我想将它们合并到单个html页面中。
我面临的问题是，对于treelist我正在使用d3.js 第3版，并且为了使用d3.js 第4版创建树图。因此，当我尝试将它们嵌入到单个页面中时，存在版本冲突（它只是显示树形图）。
请指导我如何解决版本冲突。 / p>以下是我的d3.js代码，包含版本3（第一个col-md-4）和第四个版本（col-md-8）
< script src =http://d3js.org/d3.v3.min.js>< / script>
< div class =row>
< div class =col-md-4>
< div id =treelistteststyle =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）;
函数render（data，parent）{
var nodes = tree.nodes（data），
duration = 250;
function toggleChildren（d）{
$ （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;
返回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：;
返回caret glyphicon+图标;
}）;
entered.append（span）。attr（class，function（d）{
var icon = d.children || d._children？glyphicon-folder-close
：glyphicon-file;
返回glyphicon+图标;
}）;
entered.append（span）。attr（class，filename）
.html（function（d）{return d.name.substring（0，5） }）;
$ b $ nodeEls.select（span.caret）。attr（class，function（d）{
var icon = d.children？glyphicon-chevron-down
：d._children？glyphicon-chevron-right：;
返回caret glyphicon+图标;
}）;
$ b $ nodeEls.transition（）。duration（duration）
.style（top，function（d）{return（dy - tree.nodeHeight（））+px;} ）
.style（left，function（d）{return dx +px;}）
.style（opacity，1）;
nodeEls.exit（）。remove（）;
}
渲染（数据，数据）;
}）;
< / script>
< / div>
< div class =col-md-8>
< div id =maptest>
< script src =http://d3js.org/d4.v3.min.js>< / script>
< script src =d3.v4.min.js>< / script>
< script>
var svg = d3.select（＃maptest）
.append（svg）
.attr（width，100％）
.attr（ （zoom，function（）{
svg.attr（transform，d3.event.transform）（height，50％）
.call
））
.append（g）
var treemap = d3.treemap（）
.tile（d3 .treemapResquarify）
.size（[1000，1000]）
.round（true）
.paddingInner（1）;
$ b $ d .json（data.json，function（error，data）{
if（error）throw error;
var root = d3.hierarchy （数据）
.sum（sumBySize）
treemap（root）;
var cell = svg.selectAll（g）
.data （root.leaves（））
.enter（）。append（g）
.attr（transform，function（d）{returntranslate（+ d.x0 +， + d.y0 +）;}）;
cell.append（rect）
.attr（id，function（d）{return d.data。 （）函数（d）{返回d.x1 - d.x0;}）
.attr（height，function（d）{return d。 （fill，function（d）{return color（d.data.value）;}）;
cell.append（ clipPath）
.attr（id，function（d）{returnclip-+ 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}）;
}）;
函数sumByCount（d）{
return d.children？ 0：1;
}
函数sumBySize（d）{
return d.value;
}
< / script>
< / div>
< / div>
< / div>
解决方案
您可以在本地下载脚本的版本3，将最后一行改为
this.d3 = d3;
至
this.d3v3 = d3;
因此，您可以使用d3版本4调用d3，而版本3的库调用d3v3
I am try to construct treelist and treemap in single html page using d3.js. My treelist and treemap are working fine on individual pages,but i want to combine those into single html page.
The problem i am facing is, for treelist i am using d3.js version 3 and for treemap i am using d3.js version 4. So when i try to embedded them into my single page there are version conflicts(it just shows the treemap).
Please guide me how should i resolve the version conflicts.
Following is my d3.js code with Version 3(first col-md-4) and Version 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>
解决方案
You can download the version 3 of the script locally and change the last line from
this.d3 = d3;
to
this.d3v3 = d3;
So you can use d3 version 4 calling d3, and the version 3 of the library calling d3v3
这篇关于在同一个html页面上使用不同的D3版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
