正如标题所述，我有一个库存下拉菜单，其中包含一些CSS布局和内容。问题是，只要我将D3代码添加到页面中，下拉菜单就会停止工作。它们只在一个函数中相互关联，我真的不明白为什么它们相互影响。
使用Javascript：
<script src="d3/d3.v3.js"></script>
<script type="text/javascript">
function passvars(countryname, number){
var country = countryname;
var diagramvalue = number;
if (diagramvalue === 0){
}
else if(diagramvalue === 1){
//Geef waardes van marge, breedte en hoogt, hier wordt later weer naar terug gerefereerd
var margin = {top: 20, right: 220, bottom: 80, left: 70},
width = 960 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
//Geeft breedte van de bars op de x-as
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .5);
//Y-as, met hoogte
var y = d3.scale.linear()
.rangeRound([height, 0]);
//Geeft kleuren van de bars
var color = d3.scale.ordinal().range(["#261758", "#605292", "#877CB0"]);
//vooraf gegeven waardes waar x en y as moeten komen
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
//SVG geeft hoeveelheid scherm wat getoont wordt
var svg2 = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
cachedSvg = svg2;
//Inladen csv van site, daarna elke waarde van Periods oproepen
d3.csv("http://arnoutdael.github.io/latvia.csv", function(error, dataset) {
//Data die moet worden weergeven
var data = [];
for (i = 0; i < dataset.length; i++) {
var Countryyears = {
Periods : dataset[i].Periods,
"Immigratie 0 tot 20 jaar" : dataset[i].immigration,
"Immigratie 20 tot 65 jaar" : dataset[i].immigration25,
"Immigratie 65 jaar en ouder" : dataset[i].immigration65
}
//Nieuwe data voor array
data.push(Countryyears);
}
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Periods"; }));
//Verkrijgen alle values
data.forEach(function(d) {
var y0 = 0;
d.values = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.values[d.values.length - 1].y1;
});
x.domain(data.map(function(d) { return d.Periods; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
//Tekst van x-as
svg2.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-65)"
})
svg2.append("text")
.attr("x", 650)
.attr("y", 550)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Jaren van immigratie");
//Tekst van y-as
svg2.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 9)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Hoeveelheid immigranten");
//Geeft Periodstallen
var Periods = svg2.selectAll(".Periods")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x(d.Periods) + ",0)"; });
//Creëert de bars
Periods.selectAll("rect")
.data(function(d) { return d.values; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); });
//Legenda tekst
var legend = svg2.selectAll(".legend")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
//Creërt bars van legenda (kleuren)
legend.append("rect")
.attr("x", width + 120)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
//Legenda tekst positie
legend.append("text")
.attr("x", width + 110)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });});
}
else if(diagramvalue === 2){
}
else{
}
};
HTML：
<div class="container">
<h1 class="title">Charts</h1>
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Circle Diagram <i class="icon-arrow"></i></a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Bar Diagram <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><button onclick="passvars('Albania', 1)">Albania</button></li>
<li><button onclick="passvars('Armenia', 1)">Armenia</button></li>
<li><button onclick="passvars('Austria', 1)">Austria</button></li>
<li><button onclick="passvars('Azerbaijan', 1)">Azerbaijan</button></li>
<li><button onclick="passvars('Belgium', 1)">Belgium</button></li>
<li><button onclick="passvars('Bulgaria', 1)">Bulgaria</button></li>
<li><button onclick="passvars('Croatia', 1)">Croatia</button></li>
<li><button onclick="passvars('Cyprus', 1)">Cyprus</button></li>
<li><button onclick="passvars('Czech Republic', 1)">Czech Republic</button></li>
<li><button onclick="passvars('Denmark', 1)">Denmark</button></li>
<li><button onclick="passvars('Estonia', 1)">Estonia</button></li>
<li><button onclick="passvars('Finland', 1)">Finland</button></li>
<li><button onclick="passvars('France', 1)">France</button></li>
<li><button onclick="passvars('Georgia', 1)">Georgia</button></li>
<li><button onclick="passvars('Germany', 1)">Germany</button></li>
<li><button onclick="passvars('Greece', 1)">Greece</button></li>
<li><button onclick="passvars('Hungary', 1)">Hungary</button></li>
<li><button onclick="passvars('Italy', 1)">Italy</button></li>
<li><button onclick="passvars('Latvia', 1)">Latvia</button></li>
<li><button onclick="passvars('Luxembourg', 1)">Luxembourg</button></li>
<li><button onclick="passvars('Norway', 1)">Norway</button></li>
<li><button onclick="passvars('Poland', 1)">Poland</button></li>
<li><button onclick="passvars('Portugal', 1)">Portugal</button></li>
<li><button onclick="passvars('Romenia', 1)">Romenia</button></li>
<li><button onclick="passvars('Russia', 1)">Russia</button></li>
<li><button onclick="passvars('Slovakia', 1)">Slovakia</button></li>
<li><button onclick="passvars('Slovenia', 1)">Slovenia</button></li>
<li><button onclick="passvars('Spain', 1)">Spain</button></li>
<li><button onclick="passvars('Sweden', 1)">Sweden</button></li>
<li><button onclick="passvars('Switzerland', 1)">Switzerland</button></li>
<li><button onclick="passvars('Turkey', 1)">Turkey</button></li>
<li><button onclick="passvars('United Kingdom', 1)">United Kingdom</button></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Line Diagram <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><button onclick="passvars('Albania', 2)">Albania</button></li>
<li><button onclick="passvars('Armenia', 2)">Armenia</button></li>
<li><button onclick="passvars('Austria', 2)">Austria</button></li>
<li><button onclick="passvars('Azerbaijan', 2)">Azerbaijan</button></li>
<li><button onclick="passvars('Belgium', 2)">Belgium</button></li>
<li><button onclick="passvars('Bulgaria', 2)">Bulgaria</button></li>
<li><button onclick="passvars('Croatia', 2)">Croatia</button></li>
<li><button onclick="passvars('Cyprus', 2)">Cyprus</button></li>
<li><button onclick="passvars('Czech Republic', 2)">Czech Republic</button></li>
<li><button onclick="passvars('Denmark', 2)">Denmark</button></li>
<li><button onclick="passvars('Estonia', 2)">Estonia</button></li>
<li><button onclick="passvars('Finland', 2)">Finland</button></li>
<li><button onclick="passvars('France', 2)">France</button></li>
<li><button onclick="passvars('Georgia', 2)">Georgia</button></li>
<li><button onclick="passvars('Germany', 2)">Germany</button></li>
<li><button onclick="passvars('Greece', 2)">Greece</button></li>
<li><button onclick="passvars('Hungary', 2)">Hungary</button></li>
<li><button onclick="passvars('Italy', 2)">Italy</button></li>
<li><button onclick="passvars('Latvia', 2)">Latvia</button></li>
<li><button onclick="passvars('Luxembourg', 2)">Luxembourg</button></li>
<li><button onclick="passvars('Norway', 2)">Norway</button></li>
<li><button onclick="passvars('Poland', 2)">Poland</button></li>
<li><button onclick="passvars('Portugal', 2)">Portugal</button></li>
<li><button onclick="passvars('Romenia', 2)">Romenia</button></li>
<li><button onclick="passvars('Russia', 2)">Russia</button></li>
<li><button onclick="passvars('Slovakia', 2)">Slovakia</button></li>
<li><button onclick="passvars('Slovenia', 2)">Slovenia</button></li>
<li><button onclick="passvars('Spain', 2)">Spain</button></li>
<li><button onclick="passvars('Sweden', 2)">Sweden</button></li>
<li><button onclick="passvars('Switzerland', 2)">Switzerland</button></li>
<li><button onclick="passvars('Turkey', 2)">Turkey</button></li>
<li><button onclick="passvars('United Kingdom', 2)">United Kingdom</button></li>
</ul>
</li>
CSS：
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}
*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 10px auto;
float: left;
padding-left: 10px;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font-family: 'Pacifico';
font-weight: normal;
font-size: 40px;
text-align: left;
line-height: 1.4;
color: #2980B9;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: #2980B9;
-moz-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
-webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #2c89c6;
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6e6e6e;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
@keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}