在同一个html页面上使用不同的D3版本 [英] Using different D3 versions on same html page
问题描述
我尝试使用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屋!