我现在只玩了一周的javascript和d3，所以我对这个主题很新。
必需 - 包含三个标签的网站，每个标签显示不同的图表/图表。
我在第一个标签上添加了一个情节，它完美无缺。
问题 - 在第二个标签中添加第二个图时，第一个图表显示效果不佳，第二个图表根本没有显示。
我在网上搜索过，但只获得了bootstrap的解决方案，这对我来说似乎不同。
我对两个图都使用相同的.js文件，只是在其中打开两个不同的.tsv文件并在.js文件中调用不同的函数。
我的html文件是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<title>Title</title>
<link rel="stylesheet" type="text/css" media="all" href="css/jquery-ui.css">
<script src="js/d3.js" charset="utf-8"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title"> Dashboard</span>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">Tab2</a>
</div>
</header>
<main id="app" class="mdl-layout__content">
<!-- TAB 1 -->
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<h4 class="mdl-cell mdl-cell--12-col" > Plot1 </h4>
</div>
<div class="plotAndNavi locator-chart" id="chart1" style="background-color: white;">
<div class="ul-holder">
<ul class="dateselect">
<li><div class="vcenter"></div>
<button class="button"
id="picker"
onclick="initialize(0);"
value = "0">0 %
</li>
<li><div class="vcenter"></div>
<button class="button"
id="picker"
onclick="initialize(5);"
value = "5">5 %
</li>
</ul>
</div>
<div class="clearboth"></div>
</div>
</div>
</section>
<!-- TAB 2 -->
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
<div class="plotAndNavi2 locator-chart" id="chart2" style="background-color: white;">
<div class="ul-holder">
<ul class="dateselect">
<li><div class="vcenter">
<button class="button"
onclick="addDays(-1);return false;">Previous</a></div></li>
<li><div class="vcenter">Date<br><input
type="text" id="datepicker" disabled="disabled" value="loading..." /></div></li>
<li><div class="vcenter"><button class="nextDayButton"
onclick="addDays(1);return false;">Next</a></div></li>
</ul>
</div>
<div class="clearboth"></div>
</div>
</div>
</section>
</main>
<!-- Material Design Lite version -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet"
href="https://code.getmdl.io/1.3.0/material.blue-light_blue.min.css" />
<link rel="stylesheet"
href="css/style.css" />
<!-- make tabs work -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- VueJs & App -->
<script src="js/helper.js"></script>
</body>
</html>
helper.js如下所示：
"use strict";
Date.prototype.ymd = function() {
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate();
return this.getFullYear() + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd >= 10 ? dd : "0" + dd);
};
var data;
var yAxisGlobalMax = 980;
var initialize = function(value) {
...Do Stuff...
updateGraph(filteredData);
};
var initializeDatepicker = function() {
...Do stuff...
updateGraph(data.filter(function(row) { return row.date == currentHistory.ymd(); }));
};
var addDays = function(anzahlTage) {
var currentDate = $("#datepicker").datepicker('getDate');
currentDate.setDate(currentDate.getDate() + anzahlTage);
$("#datepicker").datepicker('setDate', currentDate);
$("#datepicker").change();
};
var validDatepickerDate = function(date) {
return data.filter(function(row) { return row.date == date.ymd(); }).length == 0
? [false, '']
: [true, ''];
};
// Dimensions
....
// Chart
var chart = d3.select("#Simulation")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Axes
chart.append("text")
.attr("x", 0)
.attr("y", -40)
.attr("class", "axislabel")
.attr("transform", "rotate(-90)")
.text("title y");
chart.append("text")
.attr("x", width)
.attr("y", height + 40)
.attr("class", "axislabel")
.text("title x");
// Axes calculation
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.call(yAxis);
function type(d) {
d.value = +d.value; // coerce to number
return d;
}
d3.tsv("file1.tsv", type, function(error, dataNew){
data = dataNew;
console.log(data);
initializeDatepicker();
var todayYMD = (new Date()).ymd();
var maxDate = data.reduce(function(previous,current){ return previous.date > current.date ? previous : current });
var minDate = data.reduce(function(previous,current){ return previous.date < current.date ? previous : current });
//yAxisGlobalMax = data.reduce(function(previous,current){ return previous.value > current.value ? previous : current }).value;
var dp = $("#datepicker");
dp.attr("value", todayYMD);
dp.datepicker("option", "minDate", new Date(minDate.date) );
dp.datepicker("option", "maxDate", new Date(maxDate.date) );
dp.removeAttr("disabled");
dp.change();
d3.tsv("file2.tsv", type, function(error, dataNew2){
data = dataNew2;
console.log(data);
initialize(0);
});
});
var updateGraph = function(data) {
x.domain(data.map(function(d) { return d.name; }));
//y.domain([0, d3.max(data, function(d) { return d.value; })]);
y.domain([0, yAxisGlobalMax]);
chart.select(".y.axis")
.transition().duration(500).ease("sin-in-out")
.call(yAxis);
chart.select(".x.axis")
.transition().duration(500).ease("sin-in-out")
.call(xAxis);
var bars = chart.selectAll(".bar").data(data, function(d) { return x(d.name) });
bars.exit().remove();
bars.transition().duration(500)
.attr("height", function(d) { return height - y(d.value); })
.attr("x", function(d) { return x(d.name); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.value); });
bars.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.name); })
.attr("y", y(0))
.attr("height", 0)
.attr("width", x.rangeBand())
.transition().duration(500) //.ease("elastic")
.attr("height", function(d) { return height - y(d.value); })
.attr("y", function(d) { return y(d.value); });
var texts = chart.selectAll(".barlabel").data(data, function(d) { return x(d.name) });
texts.exit().remove();
$("text.barlabel").css("font-size", "1.199em");
texts.transition().duration(500)
.attr("x", function(d) { return x(d.name) + (width - margin.left - margin.right)/2/data.length; })
.attr("y", function(d) { return y(d.value) + 3; })
.styleTween("font-size", function(d) { return d3.interpolate(this.style.getPropertyValue("font-size"), "1.2em");})
.text(function(d) { return d.value > 10 ? d.value : ""; })
texts.enter().append("text")
.attr("class", "barlabel")
.attr("x", function(d) { return x(d.name) + (width - margin.left - margin.right)/2/data.length; })
.attr("y", function(d) { return y(d.value) + 3; })
.attr("dy", "1em")
.text(function(d) { return d.value > 10 ? d.value : ""; })
.style("opacity", 0)
.transition().duration(500)
.style("opacity", 1);
};
我真的不知道问题可能在哪里请，我会感谢任何帮助！