Question

我一直在编写一个用于在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>

D3代码只适用于firefox

0 个答案: