任何人都可以告诉为什么d3.select().append()适用于第一个甘特图但不适用于它之后的那个？
HTML代码如下所示：
<HTML><head> <Title>Search Results</Title> <Meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.min.Js"></script> <script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.11.1/jquery.min.Js"></script> <script src="http://d3Js.org/d3.v3.min.Js"></script> <script language="JavaScript" type="text/JavaScript" src="{% static 'd3-timeline.Js' %}"></script> <STYLE type="text/CSS"> .axis path,.axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { Font-family: sans-serif; Font-size: 10px; } .timeline-label { Font-family: sans-serif; Font-size: 12px; } #timeline2 .axis { transform: translate(0px,30px); -ms-transform: translate(0px,30px); /* IE 9 */ -webkit-transform: translate(0px,30px); /* Safari and Chrome */ -o-transform: translate(0px,30px); /* Opera */ -moz-transform: translate(0px,30px); /* firefox */ } .coloreddiv { height:20px; wIDth:20px; float:left; } </STYLE></head><body><script language="JavaScript" type="text/JavaScript"> window.onload = function() { var MyVar = [{label: "F7",times: [{"starting_time":1420228800000,"ending_time":1420257600000}]}] function drawtimeline_MyVar() { var chart = d3.timeline() .stack() // toggles graph stacking .rowSeperators("rgb(100,100,100)") .click(function (d,i,datum) { var myWindow=window.open("","MsgWindow","wIDth=500,height=500"); myWindow.document.write(d.info); }) .scroll(function (x,scale) { $("#scrolled_date").text(scale.invert(x) + " to " + scale.invert(x+1000)); }) .showborderFormat({margintop:25,marginBottom:2,wIDth:10,color:"rgb(0,0)"}) .display("rect") .tickFormat({format: d3.time.format("%Y %j"),tickTime: d3.time.days,tickInterval: 1,tickSize: 12 }) .margin({left:220,right:30,top:0,bottom:0}) .wIDth(1000) ; var svg = d3.select("#div_MyVar").append("svg").attr("wIDth",1000) .datum(MyVar).call(chart); } //Call the function drawtimeline_MyVar(); }</script><div> <h4><p >Requests</p></h4> <div ID="div_MyVar"></div></div><script language="JavaScript" type="text/JavaScript"> window.onload = function() { var MyVar2 = [{label: "F7","ending_time":1420257600000}]}] function drawtimeline_MyVar2() { var chart = d3.timeline() .stack() // toggles graph stacking .rowSeperators("rgb(100,bottom:0}) .wIDth(1000) ; var svg = d3.select("#div_MyVar2").append("svg").attr("wIDth",1000) .datum(MyVar2).call(chart); } //Call the function drawtimeline_MyVar2(); }</script><div> <h4><p >Requests2</p></h4> <div ID="div_MyVar2"></div></div></body></HTML> 作为旁注,我尝试更改div ID的变量名称,以便它们是唯一的,但这使得第二个甘特图呈现而不是第一个.
解决方法 您应该将svg呈现给不同的div容器.var svg = d3.select("#div_MyVar1") .append("svg").attr("wIDth",1000) .datum(MyVar).call(chart); 当然,具有指定ID的div容器应该出现在HTML文档中.
<div ID="div_MyVar1"></div>
这是一个完整的代码与修改功能.
<HTML><head> <Title>Search Results</Title> <Meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.min.Js"></script> <script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.11.1/jquery.min.Js"></script> <script src="http://d3Js.org/d3.v3.min.Js"></script> <script language="JavaScript" type="text/JavaScript" src="{% static 'd3-timeline.Js' %}"></script> <STYLE type="text/CSS"> .axis path,"ending_time":1420257600000}]}] function drawtimeline_MyVar(n) { //added parameter var chart = d3.timeline() .stack() // toggles graph stacking .rowSeperators("rgb(100,bottom:0}) .wIDth(1000) ; var svg = d3.select("#div_MyVar"+n).append("svg").attr("wIDth",1000) .datum(MyVar).call(chart); } //Call the function drawtimeline_MyVar(1); drawtimeline_MyVar(2); }</script><div> <h4><p >Requests</p></h4> <div ID="div_MyVar1"></div><!-- changed ID --></div><script language...> same script as above</script><div> <h4><p >Requests2</p></h4> <div ID="div_MyVar2"></div><!-- changed ID --></div></body></HTML> 另一个版本
<HTML><head> <Title>Search Results</Title> <Meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.min.Js"></script> <script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.11.1/jquery.min.Js"></script> <script src="http://d3Js.org/d3.v3.min.Js"></script> <script language="JavaScript" type="text/JavaScript" src="{% static 'd3-timeline.Js' %}"></script> <STYLE type="text/CSS"> .axis path,30px); /* firefox */ } .coloreddiv { height:20px; wIDth:20px; float:left; } </STYLE></head><body><script language="JavaScript" type="text/JavaScript"> var MyVar = [{label: "F7","ending_time":1420257600000}]}] function drawtimeline_MyVar() { var chart = d3.timeline() .stack() // toggles graph stacking .rowSeperators("rgb(100,1000) .datum(MyVar).call(chart); }</script><div> <h4><p >Requests</p></h4> <div ID="div_MyVar"></div></div><script language="JavaScript" type="text/JavaScript"> var MyVar2 = [{label: "F7","ending_time":1420257600000}]}] function drawtimeline_MyVar2() { var chart = d3.timeline() .stack() // toggles graph stacking .rowSeperators("rgb(100,1000) .datum(MyVar2).call(chart); }</script><div> <h4><p >Requests2</p></h4> <div ID="div_MyVar2"></div></div><script> window.onload = function() { //Call the function drawtimeline_MyVar(); drawtimeline_MyVar2(); }</script></body></HTML> 总结 以上是内存溢出为你收集整理的html – d3.select().append()在多次使用时不起作用全部内容，希望文章能够帮你解决html – d3.select().append()在多次使用时不起作用所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）