一页中有多个d3图
[英]multiple d3 graphs in a single page
问题描述
Actually i am showing a d3 graph in a browser. 
实际上，我正在浏览器中显示d3图形。 Now the change is to show dynamic number of d3 graphs on a single browser. 现在的变化是在单个浏览器上显示d3图形的动态数量。 So i tried to create two more svg elements inside my previous div tag. 因此，我尝试在先前的div标签内创建另外两个svg元素。 But it is not working. 但这是行不通的。 But some of the samples which i referred shows the same thing. 但是我提到的一些样本显示了同样的事情。
<div id="container">
<svg id="svgcontainer"></svg>
<svg id="svgcontainer1"></svg>
<svg id="svgcontainer2"></svg>
</div>
var svg = d3.select("#svgcontainer").attr("width", width)
.attr("height", height);
var svg1 = d3.select("#svgcontainer1").attr("width", width)
.attr("height", height);
var svg2 = d3.select("#svgcontainer2").attr("width", width)
.attr("height", height);
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function (d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 12)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
.style("stroke", "#4679BD")
.style("opacity", "1");
svg1.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function (d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 12)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
.style("stroke", "#4679BD")
.style("opacity", "1");
svg2.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function (d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 12)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
.style("stroke", "#4679BD")
.style("opacity", "1");
But it is not working. 但这是行不通的。
I am adding the whole code here. 我在这里添加整个代码。
<div class="context-menu-one box menu-1">
<div id="container">
<svg id="svgcontainer"></svg>
<svg id="svgcontainer1"></svg>
<svg id="svgcontainer2"></svg>
</div>
</div>
<canvas width="400" height="400"></canvas>
<script src="http://d3js.org/d3.v3.min.js"></script>
<%--to add tooltip for node--%>
<script type='text/javascript' src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"> </script>
<script>
var selectednode;
console.log(document.getElementById("hdnLink").value);
var graph = JSON.parse(document.getElementById("hdnLink").value);
// for TFL graph
var width = 4000,
height = 4000;
//var width = 3000,
// height = 3000;
debugger;
var color = d3.scale.category20();
var force = d3.layout.force()
//.charge(-3000)
.charge(function (d) { return d.degree * -250; })
.chargeDistance(500)
.linkDistance(5)
.size([width, height]);
//var svg = d3.select("#container").append("svg")
// .attr("width", width)
// .attr("height", height);
var svg = d3.select("#svgcontainer").attr("width", width)
.attr("height", height);
var svg1 = d3.select("#svgcontainer1").attr("width", width)
.attr("height", height);
var svg2 = d3.select("#svgcontainer2").attr("width", width)
.attr("height", height);
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function (d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 12)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto");
svg.append("path")
.attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
.style("stroke", "#4679BD")
.style("opacity", "1");
svg1.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function (d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 12)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto");
svg1.append("path")
.attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
.style("stroke", "#4679BD")
.style("opacity", "1");
svg2.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function (d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 12)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto");
svg2.append("path")
.attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
.style("stroke", "#4679BD")
.style("opacity", "1");
ARROW_SHIFT = 1;
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append('svg:path')
//.attr("class", "link")
.style("stroke", "rgba(0, 0, 0, 1)")
//.attr("display", "none")
.attr("display", function (d) {
if (document.getElementById("chkShowAnimation").checked == true) {
return null;
}
else
return "none";
})
.style("stroke-width", function (d) { return Math.sqrt(d.value); })
.style("marker-end", "url(#suit)")
.attr('marker-start', function (d) {
return d.birectional ? 'url(#start-arrow)' : null;
});
var link1 = svg1.selectAll(".link")
.data(graph.links)
.enter().append('svg1:path')
//.attr("class", "link")
.style("stroke", "rgba(0, 0, 0, 1)")
//.attr("display", "none")
.attr("display", function (d) {
if (document.getElementById("chkShowAnimation").checked == true) {
return null;
}
else
return "none";
})
.style("stroke-width", function (d) { return Math.sqrt(d.value); })
.style("marker-end", "url(#suit)")
.attr('marker-start', function (d) {
return d.birectional ? 'url(#start-arrow)' : null;
});
var link2 = svg2.selectAll(".link")
.data(graph.links)
.enter().append('svg2:path')
//.attr("class", "link")
.style("stroke", "rgba(0, 0, 0, 1)")
//.attr("display", "none")
.attr("display", function (d) {
if (document.getElementById("chkShowAnimation").checked == true) {
return null;
}
else
return "none";
})
.style("stroke-width", function (d) { return Math.sqrt(d.value); })
.style("marker-end", "url(#suit)")
.attr('marker-start', function (d) {
return d.birectional ? 'url(#start-arrow)' : null;
});
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return d.name + " , " + d.group;
})
svg.call(tip);
svg1.call(tip);
svg2.call(tip);
The Input for this sample is
{"nodes" : [{"name":"NithyaShree","group":"Family1","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310477"},{"name":"SowmyaShree","group":"Family1","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310478"},{"name":"Lakshmanan","group":"Family1","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310479"},{"name":"Rajeshwari","group":"Family1","degree":6,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310480"},{"name":"Ravi","group":"Family2","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310481"},{"name":"Komi","group":"Family2","degree":5,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310482"},{"name":"Pooja","group":"Family2","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid {“ nodes”：[{“ name”：“ NithyaShree”，“ group”：“ Family1”，“ degree”：2，“ Opacity”：“ 1”，“ highlight”：“ false”，“ clicked”：“假 “ ”colorname“： ”＃FFFFFF“， ”optionid“： ”310477“}，{ ”名称“： ”SowmyaShree“， ”基团“： ”天伦之乐“， ”度“：2 ”不透明度“：” 1 “ ”亮点“： ”假“， ”点击“： ”假“， ”colorname“： ”＃FFFFFF“， ”optionid“： ”310478“}，{ ”名“： ”Lakshmanan“， ”群“：”天伦之乐“ ， ”度“：2， ”不透明度“： ”1“， ”亮点“： ”假“， ”点击“： ”假“， ”colorname“： ”＃FFFFFF“， ”optionid“： ”310479“} ，{ “名称”： “Rajeshwari”， “基团”： “天伦之乐”， “度”：6， “透明度”： “1”， “突出显示”： “假”， “点击”： “假”，“colorname “：” ＃FFFFFF”， “optionid”： “310480”}，{ “名称”： “拉维”， “基团”： “Family2”， “度”：2 “不透明度”： “1”， “突出显示” ： “假”， “点击”： “假”， “colorname”： “＃FFFFFF”， “optionid”： “310481”}，{ “名”： “克米”， “群”： “Family2”，“度“5，” 透明度 “：” 1" ， “亮点”： “假”， “点击”： “假”， “colorname”： “＃FFFFFF”， “optionid”： “310482”}，{ “名” ： “普加”， “基团”： “Family2”， “度”：2 “不透明度”： “1”， “突出显示”： “假”， “点击”： “假”， “colorname”：“＃FFFFFF “” optionid ":"310483"},{"name":"Harish","group":"Family3","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310484"},{"name":"Girish","group":"Family3","degree":5,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310485"},{"name":"Laxman","group":"Family3","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310486"},{"name":"Kirthi","group":"Family4","degree":5,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310487"},{"name":"Saran","group":"Family4","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310488"},{"name":"Selvaraj","group":"Family4","degree":2,"Opacity":"1","highlight":"false","clicked":"false","colorname":"#FFFFFF","optionid":"310489"}], "links" : [{"source":0,"target":3,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false"},{"source":1,"target":3," “：” 310483 “}，{” 名称 “：” 哈里什”， “基团”： “Family3”， “度”：2 “不透明度”： “1”， “突出显示”： “假”， “点击”： “假”， “colorname”： “＃FFFFFF”， “optionid”： “310484”}，{ “名称”： “吉里什”， “基团”： “Family3”， “度”：5 “不透明度”：” 1" ， “亮点”： “假”， “点击”： “假”， “colorname”： “＃FFFFFF”， “optionid”： “310485”}，{ “名”： “拉克斯曼”， “组”： “Family3”， “度”：2， “不透明度”： “1”， “亮点”： “假”， “点击”： “假”， “colorname”： “＃FFFFFF”， “optionid”： “310486” }，{ “名称”： “Kirthi”， “基团”： “Family4”， “度”：5 “不透明度”： “1”， “突出显示”： “假”， “点击”： “假”，” colorname “：” ＃FFFFFF “ ”optionid“： ”310487“}，{ ”名称“： ”萨兰“， ”基团“： ”Family4“， ”度“：2 ”不透明度“： ”1“，” 高光“：” 假 “ ”点击“： ”假“， ”colorname“： ”＃FFFFFF“， ”optionid“： ”310488“}，{ ”名“： ”Selvaraj“， ”群“： ”Family4“，” degree“：2，” Opacity“：” 1“，” highlight“：” false“，” clicked“：” false“，” colorname“：”＃FFFFFF“，” optionid“：” 310489“}]，”链接“：[{” source“：0，” target“：3，” Opacity“：” 1“，” strength“：” 0.100000“，” bidirectional“：” False“，” highlight“：” false“}，{ “源”：1， “目标”：3“， Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false"},{"source":2,"target":3,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false"},{"source":3,"target":3,"Opacity":"1","strength":"0.500000","bidirectional":"False","highlight":"false"},{"source":4,"target":5,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false"},{"source":5,"target":5,"Opacity":"1","strength":"0.400000","bidirectional":"False","highlight":"false"},{"source":6,"target":5,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false"},{"source":7,"target":8,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false"},{"source":8,"target":8,"Opacity":"1","strength":"0.400000","bidirectional":"False","highlight":"false"},{"source":9,"target":8,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false"},{"source":10,"target":10,"Opacity":"1","strength":"0.400000","bidirectional":"False","hi 不透明度 “：” 1" ， “强度”： “0.100000”， “双向”： “错误”， “突出显示”： “假”}，{ “源”：2， “目标”：3 “不透明度”：” 1" ， “强度”： “0.100000”， “双向”： “错误”， “突出显示”： “假”}，{ “源”：3， “目标”：3 “不透明度”： “1”，”强度 “：” 0.500000" ， “双向”： “错误”， “突出显示”： “假”}，{ “源”：4， “目标”：5 “不透明度”： “1”， “强度”：” 0.100000" ， “双向”： “错误”， “突出显示”： “假”}，{ “源”：5， “目标”：5 “不透明度”： “1”， “强度”： “0.400000”，”双向 “：” 错误 “ ”突出显示“： ”假“}，{ ”源“：6， ”目标“：5 ”不透明度“： ”1“， ”强度“： ”0.100000“， ”双向“：”假 “ ”突出显示“： ”假“}，{ ”源“：7， ”目标“：8中， ”不透明度“： ”1“， ”强度“： ”0.100000“， ”双向“： ”假“，”突出显示 “：” 假 “}，{” 源 “：8，” 目标 “：8中，” 不透明度 “：” 1" ， “强度”： “0.400000”， “双向”： “错误”， “突出显示”：”假 “}，{” 源 “：9，” 目标 “：8中，” 不透明度 “：” 1" ， “强度”： “0.100000”， “双向”： “错误”， “突出显示”： “假”}， { “源”：10， “目标”：10， “透明度”： “1”， “强度”： “0.400000”， “双向”： “错误”，“喜 ghlight":"false"},{"source":11,"target":10,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false"},{"source":12,"target":10,"Opacity":"1","strength":"0.100000","bidirectional":"False","highlight":"false"}] } ghlight “：” 假 “}，{” 源 “：11，” 目标 “：10，” 透明度 “：” 1" ， “强度”： “0.100000”， “双向”： “错误”， “突出显示”：”假 “}，{” 源 “：12，” 目标 “：10，” 透明度 “：” 1" ， “强度”： “0.100000”， “双向”： “错误”， “突出显示”： “假”}] }
1 个解决方案
解决方案1
0 2015-12-09 11:24:45
The problem is that you've mis-understood slightly how D3 is working with it's method chaining. 问题是您对D3如何使用它的方法链接略有误解。 The following for example will create an <a> tag in a <p> in a <div> : 以下示例将在<div>中的<p>中创建一个<a>标记：
d3.select("body")
.append("div")
.attr("class", "test")
.append("p")
.append("a");
What you're doing is creating the following DOM: 您正在做的是创建以下DOM：
<svg>
<defs>
<marker>
<path/>
</marker>
</defs>
</svg>
The problem is that it doesn't make sense for a <path> to sit within a <defs> . 问题在于， <path>坐在<defs>是没有意义的。 Instead you want to re-select your <svg> and add it like so (note that your code doesn't actually render much to screen, just 3 small lines): 相反，您想重新选择<svg>并像这样添加它（请注意，您的代码实际上并没有在屏幕上渲染太多，只有3条小线）：
var width = 300; var height = 300; var svg = d3.select("#svgcontainer").attr("width", width) .attr("height", height); var svg1 = d3.select("#svgcontainer1").attr("width", width) .attr("height", height); var svg2 = d3.select("#svgcontainer2").attr("width", width) .attr("height", height); svg.append("defs").selectAll("marker") .data(["suit", "licensing", "resolved"]) .enter().append("marker") .attr("id", function(d) { return d; }) .attr("viewBox", "0 -5 10 10") .attr("refX", 12) .attr("refY", 0) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto"); svg.append("path") .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5") .style("stroke", "#4679BD") .style("opacity", "1"); svg1.append("defs").selectAll("marker") .data(["suit", "licensing", "resolved"]) .enter().append("marker") .attr("id", function(d) { return d; }) .attr("viewBox", "0 -5 10 10") .attr("refX", 12) .attr("refY", 0) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto"); svg1.append("path") .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5") .style("stroke", "#4679BD") .style("opacity", "1"); svg2.append("defs").selectAll("marker") .data(["suit", "licensing", "resolved"]) .enter().append("marker") .attr("id", function(d) { return d; }) .attr("viewBox", "0 -5 10 10") .attr("refX", 12) .attr("refY", 0) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto"); svg2.append("path") .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5") .style("stroke", "#4679BD") .style("opacity", "1");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="container"> <svg id="svgcontainer"></svg> <svg id="svgcontainer1"></svg> <svg id="svgcontainer2"></svg> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.