Javascript d3.js使用新数据更新轴
我已经用d3.js构建了一个散点图，我想用csv文件中的新数据更新它，点击一个按钮。 单击后，我的圆将更新，但轴不会更新 提前谢谢你的帮助 这是我的密码：Javascript d3.js使用新数据更新轴,javascript,csv,d3.js,scatter-plot,axes,Javascript,Csv,D3.js,Scatter Plot,Axes,我已经用d3.js构建了一个散点图，我想用csv文件中的新数据更新它，点击一个按钮。 单击后，我的圆将更新，但轴不会更新 提前谢谢你的帮助 这是我的密码： <!DOCTYPE html> <head> <meta charset="utf-8"> <title>OCDE</title> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.
<!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>
所以，我发现我的问题来自工具提示。 事实上，如果单击后删除更新代码中表示工具提示的两行，则我的轴正在更新！ 我不知道为什么。
因此，如果有人有答案，我将不胜感激。谢谢 似乎您已经外包了对理解您的问题至关重要的数据。请在问题本身中发布所有相关代码、图像和资源，如果链接消失或更改，您的问题将失去大部分（如果不是全部）含义！你说得对，凯尔，谢谢你的建议。那么，我已经编辑了我的帖子，添加了我的代码MP_Data.csv中有什么？如果您可以在plnkr或任何其他在线javascript编辑器中发布代码，这会有所帮助。好的，我已经用我的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