文章/答案/技术大牛

发布

社区首页 >问答首页 >d3.select().append()多次使用时不起作用

问d3.select().append()多次使用时不起作用
EN

Stack Overflow用户

提问于 2015-06-01 16:00:24

回答 1查看 1.3K关注 0票数 4

我希望使用这个git存储库的代码在网页上显示多个甘特图。第一个甘特图使用<div id="DIV_MyVar">正确呈现，其中包含来自<script>中的d3.select(#DIV_MyVar").append("svg")的正确信息。但是对于所有后续的甘特图，d3.select()不会将<svg>部分附加到<div id="DIV_MyVar">中，这样<div>就会显示为空，而不会创建甘特图。

有谁能说出为什么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, 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 class="text-center">Requests</p></h4>
   <div id="DIV_MyVar"></div>
</div>
<script language="Javascript" type="text/javascript">
    window.onload = function() {
        var MyVar2 = [{label: "F7", times: [{"starting_time":1420228800000, "ending_time":1420257600000}]}]


    function drawtimeline_MyVar2() {
    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, 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_MyVar2").append("svg").attr("width", 1000)
        .datum(MyVar2).call(chart);
    }


    //Call the function
    drawtimeline_MyVar2();
    }
</script>
<div>
  <h4><p class="text-center">Requests2</p></h4>
   <div id="DIV_MyVar2"></div>
</div>
</body>
</html>

另外，我尝试更改div I的变量名，以便它们是唯一的，但这使得第二个甘特图呈现，而不是第一个。

html

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-06-02 16:26:18

您应该将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,
        .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(n) { //added parameter
    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, 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"+n).append("svg").attr("width", 1000)
        .datum(MyVar).call(chart);
    }


    //Call the function
    drawtimeline_MyVar(1);
    drawtimeline_MyVar(2);
    }
</script>

<div>
   <h4><p class="text-center">Requests</p></h4>
   <div id="DIV_MyVar1"></div><!-- changed id -->
</div>
<script language...>
  same script as above
</script>
<div>
  <h4><p class="text-center">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,
        .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">
    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, 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);
    }
</script>

<div>
   <h4><p class="text-center">Requests</p></h4>
   <div id="DIV_MyVar"></div>
</div>
<script language="Javascript" type="text/javascript">
    var MyVar2 = [{label: "F7", times: [{"starting_time":1420228800000, "ending_time":1420257600000}]}]

    function drawtimeline_MyVar2() {
    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, 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_MyVar2").append("svg").attr("width", 1000)
        .datum(MyVar2).call(chart);
    }

</script>
<div>
  <h4><p class="text-center">Requests2</p></h4>
   <div id="DIV_MyVar2"></div>
</div>
<script>
    window.onload = function() {
        //Call the function
        drawtimeline_MyVar();
        drawtimeline_MyVar2();
    }
</script>
</body>
</html>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30578042

复制

相似问题

问d3.select().append()多次使用时不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3.select().append()多次使用时不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3.select().append()多次使用时不起作用
EN