D3 条形图中的过渡不起作用
[英]Transition In D3 Bar Graph Not Working
问题描述
学习使用 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 个解决方案
解决方案1
1 已采纳 2016-03-26 13:50:02
在创建它时，您并没有在转换中运行任何东西：
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) });
d3条形图的转换被反转
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.