D3条形图中的转换不起作用

时间：2016-03-26 13:29:15

标签： javascript d3.js

学习使用D3创建GDP条形图除了过渡之外，每件事情都工作正常

/*
define margin followed by height & width for svg
*/
//define margin
var margin = {
    top:20,right:10,bottom:100,left:40
}
//define w & h
var w = 700 - margin.left - margin.right;
var h = 500 - margin.top - margin.bottom;
/*
define svg by selecting the body and append the svg to body with proper 
height and width then appen it to g
*/
var svg = d3.select("body").
    append("svg").
    attr({
        "width": w + margin.left + margin.right,
        "height": h + margin.top + margin.bottom
    }).
    append("g").
    attr("transform", "translate(" + margin.left + "," + margin.right + ")");
/*
define scale then followed by axis
*/
//define x & y scale
var xScale = d3.scale.ordinal().
    rangeRoundBands([0, w], 0.2, 0.2);
var yScale = d3.scale.linear().
    range([h, 0]);
//define x & y axis
var xAxis = d3.svg.axis().
    scale(xScale).
    orient("bottom");
var yAxis = d3.svg.axis().
    scale(yScale).
    orient("left");
/*
import the data here we have csv data
*/
d3.csv("data.csv", function (error, data) {
    if (error) console.log("Error:Data Is Not Loaded");
    data.forEach(function (d) {
        d.country = d.country;
        d.gdp = +d.gdp;       
        console.log(d.gdp);  
    });
//sorting data
    data.sort(function (a, b) {
        return (b.gdp - a.gdp);
    });
//specify domains of x & y scale
    xScale.domain(data.map(function (d) { return d.country }));
    yScale.domain([0, d3.max(data, function (d) { return d.gdp })]);
//draw bars or bind data
    var rects = svg.selectAll("rect").
        data(data);
//enter data
    rects.enter().
        append("rect");
//transition
    rects.
        attr("height", 0).
        attr("y", h).
        transition().duration(3000).
        delay(function (d, i) {
            return i * 200;
        });
//update data
    rects.attr({
        "x": function (d) { return xScale(d.country); },
        "y": function (d) { return yScale(d.gdp); },
        "width": xScale.rangeBand(),
        "height": function (d) { return h - yScale(d.gdp) }
    });
//exit data
    rects.
        exit().
        remove();
//label the bar
    svg.selectAll("text").
        data(data).
        enter().
        append("text").
        text(function (d) {
            return (d.gdp);
        }).
        attr({
            "x": function (d) { return xScale(d.country) + xScale.rangeBand() / 2 },
            "y": function (d) { return yScale(d.gdp) + 12; }
        }).
        style({
            "fill": "white",
            "text-anchor":"middle"
        });
//draw the xAxis
    svg.append("g").
        attr("class", "x axis").
        attr("transform", "translate(0," + h + ")").
        call(xAxis).
        selectAll("text").
        attr("transform", "rotate(-60)").
        attr({
            "dx": "-.8em",
            "dy": ".25em"
        }).
        style("text-anchor", "end").
        style("font-size", "12px");
//draw the yAxis
    svg.append("g").
        attr("class", "y axis").
        call(yAxis).
        style("font-size","12px");
});

svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.axis path,.axis line {
    fill:none;
    stroke:#000;
    shape-rendering:crispEdges;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

<!DOCTYPE html>
<html>
<head>
    <title>D3 Tutorial Demo</title>
    <meta charset="utf-8" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/d3/d3.min.js"></script>
    <link href="demo.css" rel="stylesheet" />
</head>
<body>
    
    <div class="container-fluid text-center">
        <h1>Bar Graph - 2015 GDP Based On PPP Valuation</h1>
    </div>
    <script src="../Scripts/jquery-2.2.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="demo.js"></script>
</body>
</html>

这是我的data.csv文件就像

一样

country,gdp
Brazil,3.20
Italy,2.17
India,8.02
Saudi Arebia,1.13
Russa,3.47
Italy,2.17
Australia,1.13
Spain,1.68
Korea,1.84
United States,17.9
China,19.51
Japan,4.84
Germany,3.84
Turkey,1.57
United Kingdom,2.66

这是我的出局看起来像

任何人都可以指出为什么我的过渡不能提前感谢。

1 个答案:

答案 0 :(得分：1)

在创建它的过程中，您在转换过程中无法运行任何内容：

  rects.
    attr("height", 0).
    attr("y", h).
    transition().duration(3000).
    delay(function (d, i) {
        return i * 200;
    }); //<-- nothing to do  here....

如果您希望它在您的更新上运行，比如说让栏增长，只需移动它：

rects
  .attr({
    "x": function (d) { return xScale(d.country); },
    "y": function (d) { return yScale(d.gdp); },
    "width": xScale.rangeBand()
  })
  .transition() //<-- transition to act on height
  .attr("height", function (d) { return h - yScale(d.gdp) });