admin管理员组文章数量:1201805
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=".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=".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>
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>
Share
Improve this question
edited May 25, 2017 at 8:59
Gerardo Furtado
102k9 gold badges128 silver badges176 bronze badges
asked May 25, 2017 at 6:26
Bhushan KhaladkarBhushan Khaladkar
6221 gold badge9 silver badges25 bronze badges
12
- Are you getting any errors in chrome console? – Kristian Vybiral Commented May 25, 2017 at 6:41
- no i am not getting error – Bhushan Khaladkar Commented May 25, 2017 at 6:42
- It could be that your treemap is rendering in the same container as treelist. Do you have a codepen or something with the code? – Kristian Vybiral Commented May 25, 2017 at 6:43
- nops i dont have codepen – Bhushan Khaladkar Commented May 25, 2017 at 6:45
- i have binded the treemap and treelist to different id's. – Bhushan Khaladkar Commented May 25, 2017 at 6:45
3 Answers
Reset to default 14You 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
(I don't know why you are trying to do this, or if this is really necessary. Have in mind that I'm just answering your question, that is, how to use D3 v3 and v4 in the same page, without analysing your objectives or if this is an XY problem).
As you must know by now, you cannot just reference both versions in the HTML:
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
Because, obviously, that will cause a conflict when you use d3
to call the methods.
Thus, the solution is downloading one of the two versions and changing the source code.
In this solution, I'll change the source code of the v4.x version (minified) and use the regular reference to the v3. You can do the other way around (as Daniela did in her answer), but the steps are not the same.
In D3 v4.x (minified), you see this at the beginning:
// https://d3js.org Version 4.9.1. Copyright 2017 Mike Bostock.
(function(t, n) {
"object" == typeof exports && "undefined" != typeof module ?
n(exports) : "function" == typeof define && define.amd ?
define(["exports"], n) : n(t.d3 = t.d3 || {})
}) etc...
What I'm gonna do is changing that t.d3
to t.d3v4
(or any other name you want).
After that, you can use d3
to call your D3 v3 functions and d3v4
(not d3
) to call your D3 v4 functions.
Like in this example:
var scalev3 = d3.scale.linear()
//note: ^----- use `d3` for D3 v3 functions
.range([0, 5000])
var scalev4 = d3v4.scaleLinear()
//note: ^----- use `d3v4` for D3 v4 functions
.range([0, 200]);
console.log(scalev3(0.4))//logs 2000, as expected.
console.log(scalev4(0.4))//logs 80, as expected.
Here is the plunker with that code: https://plnkr.co/edit/h174Gcc3YSCJGpNljCOh?p=preview
I Use RequireJS to resolve this issue
treelist d3 Version : 3
require( ["js/common/d3.v3.min"], function(d3) { // tree list code here });
treemap d3 Version : 4
require( ["js/common/d3.v4.min"], function(d3) { // treemap code here
}
Note : You need to import require.js file : download it from here
http://requirejs.org/docs/1.0/docs/download.html
put the import statement at the end of body tag i.e.
< body>
// code ....
< /body >
本文标签: javascriptUsing different D3 versions on same html pageStack Overflow
版权声明:本文标题:javascript - Using different D3 versions on same html page - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1738640122a2104258.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论