Question

我创建了两个css按钮，并希望将它们移到标题预测客户活动下方。我使用了一些styles的css编码，因此代码可能看起来更大。请花些时间给我一个解决方案。我在下面分享我的代码。

<div class="x_content" style="margin: 0px 0px 0px 0px;color:black;width:300px;height:300px;background:#ffffff;border:1px solid black;">
<div id="pieChart" style="margin: 20px 0px 0px 20px;">Forecast Customer Activity

<head>
<style>
.dropbtn {
background-color: #ffffff;
color: black;
padding: 4px;
font-size: 10px;
border: box;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 60px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
 color: black;
padding: 4px 4px;
text-decoration: none;
display: block;
}


.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
<div class="dropdown-content">
<a href="#"class="btn btn-secondary" type="button"  id="Voice">Voice</a>
<a href="#"class="btn btn-secondary" type="button"  id="Data">Data</a>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
<div class="dropdown-content">
<a href="#"class="btn btn-secondary" type="button"  id="s4">0-4</a>
<a href="#"class="btn btn-secondary" type="button"  id="s408">4-8</a>
<a href="#"class="btn btn-secondary" type="button"  id="s812">8-12</a>
<a href="#"class="btn btn-secondary" type="button"  id="s1216">12-16</a>
<a href="#"class="btn btn-secondary" type="button"  id="s1620">16-20</a>
<a href="#"class="btn btn-secondary" type="button"  id="s2024">20-24</a>
</div>
</div>
</body>


<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="https://dc-  js.github.io/dc.js/js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<script type="text/javascript">


var Chart = dc.pieChart("#pieChart");
d3.csv("data/Forecast_Customer_Activity.csv", function(error, experiments) {

var ndx = crossfilter(experiments),
Age_GrpDimension = ndx.dimension(function (d) { return d.Age_Grp;}),
Age_GrpGroup = Age_GrpDimension.group().reduceSum(function (d) {return d.usage;});
usage_cat = ndx.dimension(function (d) { return d.Usage_category;}),
timewindow = ndx.dimension(function (d) { return d.Timewindow;}),

Chart
.width(270)
.height(120)
.slicesCap(5)
.colors(d3.scale.ordinal().range(["#458dd1","#cc7e30","#a39d97","#FFDA33","#0f63bc","#E51F30"]))
.dimension(Age_GrpDimension)
.group(Age_GrpGroup)
.legend(dc.legend().x(-5).y(5).itemHeight(10).gap(2)) 

.on('pretransition', function(chart) {
    chart.selectAll('text.pie-slice').text(function(d) {
        return  Math.round(dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100)*10)/10+ '%';
    })
});

Chart.render();
});

d3.select('#Voice').on('click', function(){
usage_cat.filter("Voice");
dc.redrawAll();
});

d3.select('#Data').on('click', function(){
usage_cat.filter("Data");
dc.redrawAll();
});

d3.select('#s4').on('click', function(){
timewindow.filter("00-04");
dc.redrawAll();
});
d3.select('#s408').on('click', function(){
timewindow.filter("04-08");
dc.redrawAll();
});
d3.select('#s812').on('click', function(){
timewindow.filter("08-12");
dc.redrawAll();
});
d3.select('#s1216').on('click', function(){
timewindow.filter("12-16");
dc.redrawAll();
});
d3.select('#s1620').on('click', function(){
timewindow.filter("16-20");
dc.redrawAll();
});
d3.select('#s2024').on('click', function(){
timewindow.filter("20-24");
dc.redrawAll();
});

</script>

</div>
</body>

我得到的结果为：

请帮我移动标题forecast customer activity下方的按钮。

我希望结果为：

Answer 1

ID为div的{{1}}在错误的位置关闭。如果您在pieChart之后和启动</head>标记之前将其关闭，则可以获得预期结果。

Answer 2

我自己得到了答案，感谢所有那些试图帮助我的人。我分享了正确的代码，我得到了所需的结果。

<html lang="en">
<body>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://dc-js.github.io/dc.js/css/dc.css"/>
</head>
<div class="x_content" style="margin: 0px 0px 0px 0px;color:black;width:250px;height:170px;background:#ffffff;border:1px solid black;">
<div id="pieChart" style="margin: 0px 0px 0px 20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Forecast Customer Activity&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

 <head>
<style>
.dropbtn {
background-color: #ffffff;
color: black;
padding: 4px;
font-size: 10px;
border: box;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 60px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 4px 4px;
text-decoration: none;
display: block;
}


.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
</body>

<body>
<div class="dropdown">
<button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
<div class="dropdown-content">
<a href="#"class="btn btn-secondary" type="button"  id="Voice">Voice</a>
<a href="#"class="btn btn-secondary" type="button"  id="Data">Data</a>
</div>
</div>
 <div class="dropdown">
<button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
<div class="dropdown-content">
 <a href="#"class="btn btn-secondary" type="button"  id="s4">0-4</a>
 <a href="#"class="btn btn-secondary" type="button"  id="s408">4-8</a>
 <a href="#"class="btn btn-secondary" type="button"  id="s812">8-12</a>
 <a href="#"class="btn btn-secondary" type="button"  id="s1216">12-16</a>
<a href="#"class="btn btn-secondary" type="button"  id="s1620">16-20</a>
<a href="#"class="btn btn-secondary" type="button"  id="s2024">20-24</a>
 </div>
</div>
</body>
</div>

<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<script type="text/javascript">


var Chart = dc.pieChart("#pieChart");
d3.csv("data/Forecast_Customer_Activity.csv", function(error, experiments) {

var ndx = crossfilter(experiments),
Age_GrpDimension = ndx.dimension(function (d) { return d.Age_Grp;}),
Age_GrpGroup = Age_GrpDimension.group().reduceSum(function (d) {return d.usage;});
usage_cat = ndx.dimension(function (d) { return d.Usage_category;}),
timewindow = ndx.dimension(function (d) { return d.Timewindow;}),

Chart
.width(270)
.height(120)

.slicesCap(5)

     .colors(d3.scale.ordinal().range(["#458dd1","#cc7e30","#a39d97","#FFDA33","#0f63bc","#E51F30"]))
.dimension(Age_GrpDimension)
.group(Age_GrpGroup)

.legend(dc.legend().x(0).y(25).itemHeight(10).gap(2)) 


.on('pretransition', function(chart) {
    chart.selectAll('text.pie-slice').text(function(d) {
        return  Math.round(dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100)*10)/10+ '%';
     })
   })

   Chart.render();
});

d3.select('#Voice').on('click', function(){
usage_cat.filter("Voice");
dc.redrawAll();
});

d3.select('#Data').on('click', function(){
usage_cat.filter("Data");
dc.redrawAll();
});

d3.select('#s4').on('click', function(){
timewindow.filter("00-04");
dc.redrawAll();
});
d3.select('#s408').on('click', function(){
timewindow.filter("04-08");
dc.redrawAll();
});
d3.select('#s812').on('click', function(){
timewindow.filter("08-12");
dc.redrawAll();
});
d3.select('#s1216').on('click', function(){
timewindow.filter("12-16");
dc.redrawAll();
});
d3.select('#s1620').on('click', function(){
timewindow.filter("16-20");
dc.redrawAll();
});
d3.select('#s2024').on('click', function(){
timewindow.filter("20-24");
dc.redrawAll();
});

</script>

</div>
</body>
</html>

我的结果是：

Answer 3

＆＃13;

<style>
  .dropbtn {
    background-color: #ffffff;
    color: black;
    padding: 4px;
    font-size: 10px;
    border: box;
    cursor: pointer;
  }
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 60px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  }
  .dropdown-content a {
    color: black;
    padding: 4px 4px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content a:hover {
    background-color: #f1f1f1
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }
  .button-wrapper {
    background: green;
    float: left: width: 100%;
  }
</style>

<body>

  <div class="x_content" style="margin: 0px 0px 0px 0px;color:black;width:300px;height:300px;background:#ffffff;border:1px solid black;">
    <div id="pieChart" style="margin: 20px 0px 0px 20px;">

      <h1>Forecast Customer Activity</h1>
      <div class="button-wrapper">
        <div class="dropdown">
          <button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
          <div class="dropdown-content">
            <a href="#" class="btn btn-secondary" type="button" id="Voice">Voice</a>
            <a href="#" class="btn btn-secondary" type="button" id="Data">Data</a>
          </div>
        </div>

        <div class="dropdown">
          <button class="dropbtn" style="margin: 0px 0px 0px 0px;">Dropdown</button>
          <div class="dropdown-content">
            <a href="#" class="btn btn-secondary" type="button" id="s4">0-4</a>
            <a href="#" class="btn btn-secondary" type="button" id="s408">4-8</a>
            <a href="#" class="btn btn-secondary" type="button" id="s812">8-12</a>
            <a href="#" class="btn btn-secondary" type="button" id="s1216">12-16</a>
            <a href="#" class="btn btn-secondary" type="button" id="s1620">16-20</a>
            <a href="#" class="btn btn-secondary" type="button" id="s2024">20-24</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>


<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="https://dc-  js.github.io/dc.js/js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<script type="text/javascript">
  var Chart = dc.pieChart("#pieChart");
  d3.csv("data/Forecast_Customer_Activity.csv", function(error, experiments) {

    var ndx = crossfilter(experiments),
      Age_GrpDimension = ndx.dimension(function(d) {
        return d.Age_Grp;
      }),
      Age_GrpGroup = Age_GrpDimension.group().reduceSum(function(d) {
        return d.usage;
      });
    usage_cat = ndx.dimension(function(d) {
        return d.Usage_category;
      }),
      timewindow = ndx.dimension(function(d) {
        return d.Timewindow;
      }),

      Chart
      .width(270)
      .height(120)
      .slicesCap(5)
      .colors(d3.scale.ordinal().range(["#458dd1", "#cc7e30", "#a39d97", "#FFDA33", "#0f63bc", "#E51F30"]))
      .dimension(Age_GrpDimension)
      .group(Age_GrpGroup)
      .legend(dc.legend().x(-5).y(5).itemHeight(10).gap(2))

    .on('pretransition', function(chart) {
      chart.selectAll('text.pie-slice').text(function(d) {
        return Math.round(dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2 * Math.PI) * 100) * 10) / 10 + '%';
      })
    });

    Chart.render();
  });

  d3.select('#Voice').on('click', function() {
    usage_cat.filter("Voice");
    dc.redrawAll();
  });

  d3.select('#Data').on('click', function() {
    usage_cat.filter("Data");
    dc.redrawAll();
  });

  d3.select('#s4').on('click', function() {
    timewindow.filter("00-04");
    dc.redrawAll();
  });
  d3.select('#s408').on('click', function() {
    timewindow.filter("04-08");
    dc.redrawAll();
  });
  d3.select('#s812').on('click', function() {
    timewindow.filter("08-12");
    dc.redrawAll();
  });
  d3.select('#s1216').on('click', function() {
    timewindow.filter("12-16");
    dc.redrawAll();
  });
  d3.select('#s1620').on('click', function() {
    timewindow.filter("16-20");
    dc.redrawAll();
  });
  d3.select('#s2024').on('click', function() {
    timewindow.filter("20-24");
    dc.redrawAll();
  });
</script>

＆＃13;

Answer 4

如果没有编辑HTML代码，您无法真正“移动”带有CSS的按钮，但您可以使用

在底部显示它

position: absolute

和

一起玩

margin-top: XXpx;

如何移动CSS按钮？

4 个答案: