我一直在编写一个用于在D3库上显示图形的脚本,它工作得很完美,但我希望它可以在其他Internet浏览器中工作,而不仅仅是firefox,我不知道为什么,但只是工作在firefox上,这是我的代码:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Causa básica</title>
<style>
.axis path, .axis line
{
fill: none;
stroke: #777;
shape-rendering: crispEdges;
}
.axis text
{
font-family: 'Arial';
font-size: 13px;
}
.tick
{
stroke-dasharray: 1, 2;
}
.bar
{
fill: FireBrick;
}
#tooltip {
position: absolute;
width: 230px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
<svg id="visualisation" width="1000" height="500"></svg>
<body>
<div id="tooltip" class="hidden" style="left: 429px, top: 489.6px">
<p><strong><span id="city">Dar es Salaam</span></strong></p>
</div>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
InitChart();
function InitChart() {
var lineData;
d3.tsv("dataDL.tsv", function(data) {
seeData(data);
//d3.tsv("data2.tsv", function(data) {
//seeData(data);
// d3.tsv("dataProves.tsv", function(data) {
//seeData(data);
});
function seeData(lineData) {
console.log(lineData, function (d) {return +d.y1;});
var vis = d3.select("#visualisation"),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([
d3.min(lineData, function (d) {return +d.x;}),
d3.max(lineData, function (d) {return +d.x;})
]),
//yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0.079,0.13]), //this works, but is manual
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([
Math.min(d3.min(lineData, function (d) {return +d.y;}),d3.min(lineData, function (d) {return +d.y1;})),
Math.max(d3.max(lineData, function (d) {return +d.y;}),d3.max(lineData, function (d) {return +d.y1;}))
]),
xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(5)
.tickSubdivide(true),
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(5)
.orient("left")
.tickSubdivide(true);
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineFunc = d3.svg.line()
.x(function (d) {
return xRange(d.x);
})
.y(function (d) {
return yRange(d.y);
})
.interpolate('linear');
var lineFunc2 = d3.svg.line()
.x(function (d) {
return xRange(d.x);
})
.y(function (d) {
return yRange(d.y1);
})
.interpolate('linear');
vis.append("svg:path")
.attr("d", lineFunc(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 3)
.attr("fill", "none")
//acabar
.on('click', function(d) {
d3.select(this)
if(d3.select(this).attr("stroke")!= "red"){ d3.select(this) .attr("stroke", "red")}
else {d3.select(this) .attr("stroke", "blue")
d3.select(this) .attr("stroke-width", 3);}
})
.on('mouseover', function(d) {
d3.select(this)
.attr("stroke", "blue")
.attr("stroke-width", 9);
var mousecoord = [0,0];
mousecoord = d3.mouse(this);
d3.select("#tooltip")
.style("left", mousecoord[0] + "px")
.style("top", mousecoord[1]-40 + "px");
d3.select("#city")
.text("Denia");
d3.select("#tooltip").classed("hidden", false);
})
.on('mouseout', function(d) {
d3.select(this)
.attr("stroke", "blue")
.attr("stroke-width", 3);
d3.select("#tooltip").classed("hidden", true);
});
vis.append("svg:path")
.attr("d", lineFunc2(lineData))
.attr("stroke", "green")
.attr("stroke-width", 3)
.attr("fill", "none")
.on('click', function(d) {
d3.select(this)
if(d3.select(this).attr("stroke")!= "red"){ d3.select(this) .attr("stroke", "red")}
else {d3.select(this) .attr("stroke", "blue")
d3.select(this) .attr("stroke-width", 3);}
})
.on('mouseover', function(d) {
d3.select(this)
.attr("stroke", "green")
.attr("stroke-width", 9);
var mousecoord = [0,0];
mousecoord = d3.mouse(this);
d3.select("#tooltip")
.style("left", mousecoord[0] + "px")
.style("top", mousecoord[1]-40 + "px");
d3.select("#city")
.text("Valencia");
d3.select("#tooltip").classed("hidden", false);
})
.on('mouseout', function(d) {
d3.select(this)
.attr("stroke", "green")
.attr("stroke-width", 3);
d3.select("#tooltip").classed("hidden", true);
});
}
}
</script>