我目前正在开发一个“DashBoard”项目。我的目标是创建包含多个标签的网页。在每个选项卡中，都有一个图表。我现在的问题是图表仅显示在默认标签上。 我的代码在
之下<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Metrics</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'tab00')" id="defaultOpen">Summary</button>
<button class="tablinks" onclick="openTab(event, 'tab01')" >January</button>
...
<div id="tab00" class="tabcontent">
<div id="tab00HBar" onload="horizontalBarChart();"></div>
</div>
<div id="tab01" class="tabcontent">
<div id="tab01HBar" onload="horizontalBarChart();"></div>
</div>
...
<script src="http://d3js.org/d3.v3.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";}
document.getElementById("defaultOpen").click();
function horizontalBarChart(){
d3.json("data/data.json", function(error, data) {
data.forEach(function(d) {
d.dev = d.dev;
d.value = +d.value;
});
var axisMargin = 20,
margin = 20,
valueMargin = 4,
width = parseInt(d3.select(".tabcontent").node().getBoundingClientRect().width/2, 10),
height = parseInt(d3.select(".tabcontent").node().getBoundingClientRect().height/2, 10),
barHeight = (height-axisMargin-margin*2)* 0.7/data.length,
barPadding = (height-axisMargin-margin*2)*0.3/data.length,
data, bar, svg, scale, xAxis, labelWidth = 0;
max = d3.max(data, function(d) { return d.value; });
svg = d3.select("#tab00")
.append("svg")
.attr("width", width)
.attr("height", height);
bar = svg.selectAll("g")
.data(data)
.enter()
.append("g");
bar.attr("class", "bar")
.attr("cx",0)
.attr("transform", function(d, i) {
return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")";
});
bar.append("text")
.attr("class", "dev")
.attr("y", barHeight / 2)
.attr("dy", ".35em") //vertical align middle
.text(function(d){
return d.dev;
}).each(function() {
labelWidth = Math.ceil(Math.max(labelWidth, this.getBBox().width));
});
scale = d3.scale.linear()
.domain([0, max])
.range([0, width - margin*2 - labelWidth]);
xAxis = d3.svg.axis()
.scale(scale)
.tickSize(-height + 2*margin + axisMargin)
.orient("bottom");
bar.append("rect")
.attr("transform", "translate("+labelWidth+", 0)")
.attr("height", barHeight)
.attr("width", function(d){
return scale(d.value);
});
bar.append("text")
.attr("class", "value")
.attr("y", barHeight / 2)
.attr("dx", -valueMargin + labelWidth) //margin right
.attr("dy", ".35em") //vertical align middle
.attr("text-anchor", "end")
.text(function(d){
return (d.value+"%");
})
.attr("x", function(d){
var width = this.getBBox().width;
return Math.max(width + valueMargin, scale(d.value));
});
svg.insert("g",":first-child")
.attr("class", "axisHorizontal")
.attr("transform", "translate(" + (margin + labelWidth) + ","+ (height - axisMargin - margin)+")")
.call(xAxis);
});}horizontalBarChart();
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #7186f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
display: inline-block;
font-size: 14px;
font-weight: bold;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
height: 100vh;
width: 100vw;
}
.tabcontent {
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
/* Horizontal Bar */
svg {
width: 100%;
height: 100%;
position: center;
}
text {
font: 14px sans-serif;
}
text.value {
font-size: 100%;
fill: white;
}
.axisHorizontal path{
fill: none;
}
.axisHorizontal .tick line {
stroke-width: 1;
stroke: rgba(0, 0, 0, 0.2);
}
.bar {
fill: steelblue;
fill-opacity: .9;
}