Javascript D3代码仅适用于firefox_Javascript_Google Chrome_Internet Explorer_Firefox_D3.js

Javascript D3代码仅适用于firefox

javascript google-chrome internet-explorer firefox d3.js

Javascript D3代码仅适用于firefox,javascript,google-chrome,internet-explorer,firefox,d3.js,Javascript,Google Chrome,Internet Explorer,Firefox,D3.js,我一直在编写一个在D3库上显示图形的脚本，它工作得很好，但我希望它能在其他internet Explorer中工作，不仅仅是firefox，我不知道为什么，而是firefox，下面是我的代码： <!DOCTYPE html> <meta charset="utf-8"> <title>Causa básica</title> <style> .axis path, .axis line { fi

我一直在编写一个在D3库上显示图形的脚本，它工作得很好，但我希望它能在其他internet Explorer中工作，不仅仅是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>


原因
.轴路径，.轴线
{
填充：无；
行程：777；
形状渲染：边缘清晰；
}
.轴文本
{
字体系列：“Arial”；
字体大小：13px；
}
打上钩
{
笔划数组：1,2；
}
.酒吧
{
填料：耐火砖；
}
#工具提示{
位置：绝对位置；
宽度：230px；
高度：自动；
填充：10px；
背景色：白色；
-webkit边界半径：10px；
-moz边界半径：10px；
边界半径：10px；
-webkit盒阴影：4px4x10pxRGBA（0,0,0,0.4）；
-moz盒阴影：4px4x10pxRGBA（0,0,0,0.4）；
盒影：4px4x10pxRGBA（0,0,0,0.4）；
指针事件：无；
}
#工具提示。隐藏{
显示：无；
}
#工具提示{
保证金：0；
字体系列：无衬线；
字体大小：16px；
线高：20px；
}
达累斯萨拉姆
InitChart（）；
函数InitChart（）{
var线性数据；
d3.tsv（“dataDL.tsv”），功能（数据）{
seeData（数据）；
//d3.tsv（“数据2.tsv”），功能（数据）{
//seeData（数据）；
//d3.tsv（“dataprovides.tsv”），函数（数据）{
//seeData（数据）；
});
函数seeData（lineData）{
log（lineData，函数（d）{return+d.y1；}）；
var vis=d3。选择（“可视化”），
宽度=1000，
高度=500，
边距={
前20名，
右:20,，
底数：20，
左：50
}, 
xRange=d3.scale.linear（）.range（[MARGINS.left，WIDTH-MARGINS.right]）.domain([
d3.min（行数据，函数（d）{return+d.x；}），
max（lineData，函数（d）{return+d.x；}）
]),
//yRange=d3.scale.linear（）.range（[HEIGHT-MARGINS.top，MARGINS.bottom]）.domain（[0.079,0.13]），//这可以工作，但是手动的
yRange=d3.scale.linear（）.range（[HEIGHT-MARGINS.top，MARGINS.bottom]）.domain([
Math.min（d3.min（lineData，函数（d）{return+d.y；}），d3.min（lineData，函数（d）{return+d.y1；}）），
max（d3.max（lineData，函数（d）{return+d.y；}），d3.max（lineData，函数（d）{return+d.y1；}））
]),
xAxis=d3.svg.axis（）
.刻度（X范围）
.尺寸（5）
.tickSubdivide（真），
yAxis=d3.svg.axis（）
.刻度（Y量程）
.尺寸（5）
.东方（“左”）
.tickde（真）；
vis.append（“svg:g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度-边距.底部）+”）
.呼叫（xAxis）；
vis.append（“svg:g”）
.attr（“类”、“y轴”）
.attr（“转换”、“转换”（+（MARGINS.left）+“，0）”）
.呼叫（yAxis）；
var lineFunc=d3.svg.line（）
.x（功能（d）{
返回x范围（d.x）；
})
.y（功能（d）{
返回y范围（d.y）；
})
.插入（“线性”）；
var lineFunc2=d3.svg.line（）
.x（功能（d）{
返回x范围（d.x）；
})
.y（功能（d）{
返回Y范围（d.y1）；
})
.插入（“线性”）；
vis.append（“svg:path”）
.attr（“d”，lineFunc（lineData））
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，3）
.attr（“填充”、“无”）
//阿卡巴
.on（'点击'）功能（d）{
d3.选择（本）
如果（d3.select（this.attr）（“stroke”）！=“red”）{d3.select（this.attr）（“stroke”，“red”）}
else{d3.select（this.attr）（“stroke”，“blue”）
d3.选择（this）.attr（“笔划宽度”，3）；}
})
.on（'mouseover'，函数（d）{
d3.选择（本）
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，9）；
var mousecoord=[0,0]；
mousecoord=d3.鼠标（this）；
d3.选择（“工具提示”）
.style（“左”，鼠标命令[0]+“px”）
.样式（“顶部”，鼠标命令[1]-40+“px”）；
d3.选择（“城市”）
.文本（“Denia”）；
d3.选择（“#工具提示”）.classed（“隐藏”，false）；
})
.on（'mouseout'，函数（d）{
d3.选择（本）
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，3）；
d3.选择（“#工具提示”）.classed（“隐藏”，true）；
});
vis.append（“svg:path”）
.attr（“d”，lineFunc2（lineData））
.attr（“笔划”、“绿色”）
.attr（“笔划宽度”，3）
.attr（“填充”、“无”）
.on（'点击'）功能（d）{
d3.选择（本）
如果（d3.select（this.attr）（“stroke”）！=“red”）{d3.select（this.attr）（“stroke”，“red”）}
else{d3.select（this.attr）（“stroke”，“blue”）
d3.选择（this）.attr（“笔划宽度”，3）；}
})
.on（'mouseover'，函数（d）{
d3.选择（本）
.attr（“笔划”、“绿色”）
.attr（“笔划宽度”，9）；
var mousecoord=[0,0]；
mousecoord=d3.鼠标（this）；
d3.选择（“工具提示”）
.style（“左”，鼠标命令[0]+“px”）
.样式（“顶部”，鼠标命令[1]-40+“px”）；
d3.选择（“城市”）
.文本（“巴伦西亚”）；
d3.选择（“#工具提示”）.classed（“隐藏”，false）；
})
.on（'mouseout'，函数（d）{
d3.选择（本）
.attr（“笔划”、“绿色”）
.attr（“笔划宽度”，3）；
d3.选择（“#工具提示”）.classed（“隐藏”，true）；
});
}
}

你使用的是web服务器吗？如果你想加载一个外部文件，你需要从web服务器提供。谢谢你的回答，我使用的是一个在firefox上工作的文件，但我使用的是chrome的开发工具，它说它不能从文件加载跨源文件，所以我得出了同样的假设，我将尝试一个web服务器，一个d编辑带有结果的评论，谢谢。顺便问一下，你知道当地的网站吗