d3.js用新数据更新坐标轴

我用d3.js创建了一个散点图，我想用csv文件中的新数据更新它，点击一个按钮。点击后，我的圈子正在更新，但不是我的坐标轴。d3.js用新数据更新坐标轴

在此先感谢您的帮助

这里是我的代码：

<!DOCTYPE html> 
    <head> 
    <meta charset="utf-8"> 
    <title>OCDE</title> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

    <style type="text/css"> 

     html { 
      background:#EFE6EA ; 
     } 

     body { 
      background: #FFFCF6; 
      font-family: Helvetica, Arial, sans-serif; 
     } 

     h1 { 
      font-size: 32px; 
      margin: 20px 0 0 20px; 
      padding: 30px 0px 20px 30px; 
     } 

     p { 
      color: grey; 
      font-size: 14px; 
      margin: 0 0 0 20px; 
      padding: 0 0 0 30px; 
     } 

     svg { 
      background-color: #FFFCF6; 
     } 

     circle:hover { 
      fill: purple; 
     } 

     circle { 
      stroke: black; 
      stroke-width: .20px; 
     } 

     line { 
      stroke: grey; 
      stroke-width: .20px; 
     } 

     .btn-group { 
      display: block; 
      margin: 0 0 0 50px; 
     } 

     .axis path, 
     .axis line { 
      fill: none; 
      stroke: black; 
      shape-rendering: crispEdges; 
     } 

     .axis_label text { 
      font-family: sans-serif; 
      font-size: 11px; 
     } 

    </style> 
</head> 

<body> 

<h1>OCDE</h1> 

<div id="main" role="main"> 
    <div class="btn-group" data-toggle="buttons-radio"> 
    <button type="button" id="Energies" class="btn btn-default right-rounded switch">Energies renouvelables</button> 
    </div> 
</div> 

    <script type="text/javascript"> 

    var w = 1200; 
    var h = 700; 
    var padding = [ 20, 10, 150, 170 ]; //Top, right, bottom, left 

    var xScale = d3.scale.linear() 
         .range([ padding[3], w - padding[1] - padding[3] ]); 

    var yScale = d3.scale.linear() 
         .range([ padding[0], h - padding[2] ]); 

    var xAxis = d3.svg.axis() 
        .scale(xScale) 
        .orient("bottom"); 

    var xAxis2 = d3.svg.axis() 
        .scale(xScale) 
        .orient("bottom") 
        .tickFormat(function(d) { 
          return d + "%"; 
        }); 

    var yAxis = d3.svg.axis() 
        .scale(yScale) 
        .orient("left") 
        .tickFormat(function(d) { 
          return d + "%"; 
        }); 

    var svg = d3.select("body") 
       .append("svg") 
       .attr("width",w) 
       .attr("height",h); 



d3.csv("MP_Data.csv", function(data) { 

    var rScale = d3.scale.linear() 
         .domain([d3.min(data, function(d) { 
          return + d.GHG_Emissions; 
          }) 
          ,d3.max(data, function(d) { 
          return + d.GHG_Emissions; 
          })]) 
         .range([3,25]); 

    var fill = d3.scale.ordinal() 
         .range(["#e62e45","#66B8CC","#FFCC33","#7cbf73","#FF8000","#000000"]); 

    data.sort(function(a,b) { 
       return d3.descending(+ a.GHG_Emissions, + b.GHG_Emissions); 
      }); 

    yScale.domain([ d3.max(data, function(d) { 
      return + d.Air_Pollution; 
      }),0]); 

    xScale.domain([ d3.max(data, function(d) { 
      return + d.Water_Quality;}) 
      ,d3.min(data, function(d) { 
       return + d.Water_Quality; 
      })]); 

    var circles = svg.selectAll("circle") 
      .data(data) 
      .enter() 
      .append("circle"); 

    circles.attr("cx",-100) 
      .attr("cy", d3.max(data, function(d) { 
      return yScale(d.Air_Pollution); 
      }) 
      ) 
      .attr("r", 0.1) 
      .append("title") 
      .text(function(d){ 
       return d.State; 
      }); 

    circles.transition() 
      .delay(function (d,i) { 
       return i*200; 
      }) 
      .duration(2000) 
      .attr("r",function (d) { 
       return rScale(d.GHG_Emissions); 
      }) 
      .attr("cx",function (d) { 
       return xScale(d.Water_Quality); 
      }) 
      .attr("cy", function (d) { 
       return yScale(d.Air_Pollution); 
      }) 
      .attr("fill", function(d) { 
       return fill(d.Continent); 
      }); 

    svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + (h - padding[2] + 10) + ")") 
      .call(xAxis); 

    svg.append("text") 
      .attr("class", "x axis_label") 
      .attr("transform", "translate(" + (w/2) + " ," + (h - padding[2] + 60) + ")") 
      .style("text-anchor", "middle") 
      .attr("fill", "grey") 
      .text("Indice de qualité des eaux"); 

    svg.append("g") 
      .attr("class", "y axis") 
      .attr("transform", "translate(" + (padding[3] - 10) + ",0)") 
      .call(yAxis); 

    svg.append("text") 
      .attr("class", "y axis_label") 
      .attr("transform", "rotate(-90)") 
      .attr("y", padding[3] -80) 
      .attr("x", 60 - (h/2)) 
      .attr("dy", "1em") 
      .style("text-anchor", "middle") 
      .attr("fill", "grey") 
      .text("Pollution de l'air"); 

    d3.select("#Energies") 
     .on("click", function() { 

     xScale.domain([ d3.min(data, function(d) { 
       return +d.Renewable_consumption; 
      }), 
      d3.max(data, function(d) { 
       return +d.Renewable_consumption; 
      }) 
      ]); 


     yScale.domain([ d3.max(data, function(d) { 
       return +d.Electricity_Output; 
      }), 
      d3.min(data, function(d) { 
       return +d.Electricity_Output; 
      }) 
      ]); 

     svg.selectAll("circle") 
       .data(data) 
       .transition() 
       .delay(function (d,i) { 
        return i*200; 
       }) 
       .duration(2000) 
       .attr("r",function (d) { 
        return rScale(d.GHG_Emissions); 
       }) 
       .attr("cx",function (d) { 
        return xScale(d.Renewable_consumption); 
       }) 
       .attr("cy", function (d) { 
        return yScale(d.Electricity_Output); 
       }) 
       .attr("fill", function(d) { 
        return fill(d.Continent); 
       }) 
       .append("title") 
       .text(function(d){ 
        return d.State; 
       }); 

     svg.select(".x.axis") 
       .transition() 
       .duration(1000) 
       .call(xAxis2); 

     svg.select(".x.axis_label") 
       .transition() 
       .duration(1000) 
       .text("Part d'énergies renouvelables dans la consommation d'énergie totale"); 

     svg.select(".y.axis") 
       .transition() 
       .duration(100) 
       .call(yAxis); 

     svg.select(".y.axis_label") 
       .text("Part d'énergies renouvelables dans la production d'electricité"); 
    }); 

}); 

    </script> 

</body>

我的csv文件 “MP_Data.csv” 的格式如下：

Continent,State,Air_Pollution,Water_Quality,Renewable_consumption,Electricity_Output,GHG_Emissions 
Oceanie,Australie,14,91,8.4,9.6,24 
Europe,Autriche,27,96,34.5,74.5,9.5 
Europe,Belgique,21,80,7.4,12.8,10.5 
AmeriqueNord,Canada,16,89,20.6,63.2,20 
AmeriqueSud,Chili,53,77,30.3,36.4,4.8 
Europe,République Tchèque,17,84,10.9,9.3,12.5 
Europe,Danemark,16,94,27.6,48.3,9.5 
Europe,Estonie,9,75,24.9,12.3,14.4 
Europe,Finlande,15,92,39.1,40.5,11.3 
Europe,France,12,81,12.6,14.9,7.8 
Europe,Allemagne,16,93,12.4,22.9,11.5 
Europe,Grèce,31,69,13.9,16.7,10 
Europe,Hongrie,15,76,10.2,7.6,6.2 
Europe,Islande,16,97,78.1,100,13.9 
Europe,Irlande,12,84,6.9,19.2,12.8 
Asie,Israel,23,66,8.7,0.8,10.1 
Europe,Italie,21,71,12.1,31,7.6 
Asie,Japon,25,86,4.5,12,10.5 
Asie,Corée du Sud,33,78,1.6,1.3,14 
Europe,Luxembourg,13,87,4.1,11,22.3 
AmeriqueSud,Mexique,33,78,9.4,15,6.1 
Europe,Pays-Bas,30,90,4.7,12.2,11.4 
Oceanie,Nouvelle Zélande,12,88,30.8,71.8,17.2 
Europe,Norvège,15,96,58,98,10.5 
Europe,Pologne,34,79,11.1,10.4,10.4 
Europe,Portugal,20,86,25.6,42.5,6.5 
Europe,République Slovaque,12,81,10.5,19.3,7.9 
Europe,Slovenie,26,87,19.3,27.8,9.2 
Europe,Espagne,25,79,15.7,29.6,7.4 
Europe,Suède,10,95,49.9,59.1,6.1 
Europe,Suisse,22,95,22.7,59.5,6.5 
Asie,Turquie,37,61,12.8,27.2,5.9 
Europe,Royaume-Uni,13,97,4.4,11.4,9.2 
AmeriqueNord,Etats-Unis,18,87,7.9,12,20.7 
AmeriqueSud,Brésil,19,75,43.6,82.5,7.2 
Asie,Russie,16,49,3.2,15.6,16

来源

2015-09-18 Hippipers

看来您已经将数据外包，这对了解您的问题至关重要。请在问题本身**中发布所有相关的代码，图像和资源**，如果链接死亡或更改您的问题将失去大部分，如果不是全部含义！ –

你是对的Kyll，谢谢你的建议。所以，我编辑了我的帖子，添加了我的代码 – Hippipers

MP_Data.csv中的内容是什么？如果你可以发布你的代码在plnkr或任何其他在线JavaScript编辑器，这将有所帮助。 – somename

所以，我发现我的问题来自我的工具提示。事实上，如果我点击后删除代表我的更新代码中的工具提示的2行，我的轴正在更新！我找不到原因。所以，如果任何人有答案，我将不胜感激。谢谢！

来源

2015-09-19 16:35:59 Hippipers

d3.js用新数据更新坐标轴

回答

相关问题