如何通过更改文件 d3 访问来按需更新数据?例如,只需单击一下,它就会从一个新的数据文件中读取数据,并像 AJAX 一样将更多节点添加到图形中。
我使用 d3.tsv 读取 data.tsv,这是许多相同格式的文件之一。
我做了一个简单的图表来说明我的问题。提前致谢。
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 400,
height = 200;
var x = d3.scale.linear().range([0, width]),
y = d3.scale.linear().range([height, 0]);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.tsv("data.tsv", function(error, data) {
if (error) console.warn(error);
x.domain(d3.extent(data, function(q) {return q.xCoord;}));
y.domain(d3.extent(data, function(q) {return q.yCoord;}));
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("r", 10)
.attr("cx", function(d) { return x(d.xCoord); })
.attr("cy", function(d) { return y(d.yCoord); })
});
</script>
<a href="#">update the graph</a>
最佳答案
尝试这个。
var width = 400,
height = 200;
var x = d3.scale.linear().range([0, width]),
y = d3.scale.linear().range([height, 0]);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var dataSource = 'data.tsv',
dataSource2 = 'data2.tsv';
function updateChart(sourcefile) {
d3.tsv(sourcefile, function(error, data) {
if (error) console.warn(error);
x.domain(d3.extent(data, function(q) {return q.xCoord;}));
y.domain(d3.extent(data, function(q) {return q.yCoord;}));
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("r", 10)
.attr("cx", function(d) { return x(d.xCoord); })
.attr("cy", function(d) { return y(d.yCoord); })
});
}
updateChart(dataSource);
//here is where you change the data..
d3.select(#button).on("click", function() {
updateChart(dataSource2)
})
关于ajax - D3 : How to dynamically refresh a graph by changing the data file source?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26128426/