Phoenix:如何为d3图形加载静态tsv文件
Phoenix: How to load a static tsv file for d3 graph
我正在开发一个由Phoenix框架驱动的web应用程序。我试图得到一个简单的d3线图工作,但不知何故d3找不到静态的data.tsv
文件,我试图加载到JS文件绘制图形。使用凤凰长生不老药有什么特殊的方法吗?
(function LineGraph() {
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%d-%b-%y");
var x = d3.scaleTime()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
d3.tsv("../data/data.tsv", function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
return d;
}, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text("Price ($)");
g.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
})();
我已经尝试在js目录,数据目录以及应用程序的web目录之外创建data.tsv
文件。
每次我加载应用程序,它试图使一个XHR请求的data.tsv
和返回一个404。
如何加载静态文件来绘制图形?
此类静态文件通常存储在priv/static
中。一种方法是将data.tsv
放在priv/static/data/data.tsv
中,然后将data
添加到Plug.Static
应该服务的目录列表中,通过像这样更改lib/my_app/endpoint.txt
:
plug Plug.Static,
at: "/", from: :my_app, gzip: false,
- only: ~w(css fonts images js favicon.ico robots.txt)
+ only: ~w(css fonts images js favicon.ico robots.txt data)
相关文章:
- 如何使用Express'正确加载图像;s的静态中间件
- 使用react webpack文件加载器提供静态pdf
- 无法使用express加载静态文件
- 加载静态HTML文件并按类拆分为数组
- Features.js-加载静态内容
- 谷歌地图加载静态图像
- d3js 加载静态 svg 在 IE9 中不起作用(responseXML = null)
- 如何强制数据表重新呈现或重新加载静态数据
- 如何使用 webpack 从node_modules加载静态 CSS 文件的示例
- 在express.js中加载静态文件
- 单击引导菜单botton时加载静态html
- Express js重定向-dos't更改url并且不't加载静态文件
- Phoenix:如何为d3图形加载静态tsv文件
- Ajax加载静态Rails部分
- 加载静态文件失败
- 无法从express.js加载静态文件
- 从项目表加载静态数据
- 用Expressjs加载静态html页面的数据
- @SpringBootApplication不加载静态文件
- Nginx为多个位置加载静态文件