Question

我想使用this git repository中的代码在网页上显示多个甘特图。第一个甘特图正确呈现<div id="DIV_MyVar">，其中包含d3.select(#DIV_MyVar").append("svg")中<script>的正确信息。但对于所有后续的甘特图，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 ID的变量名称，使它们是唯一的，但这使得第二个甘特图呈现而不是第一个。

Answer 1

您应该将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>

多次使用时，d3.select（）。append（）不起作用

1 个答案: