Question

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

提前感谢您的帮助

这是我的代码：

<!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

Answer 1

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

d3.js用新数据更新轴

1 个答案: