D3：如何通过改变数据文件源动态刷新的图？ [英] D3: How to dynamically refresh a graph by changing the data file source?

问题描述

如何通过改变D3访问文件按需更新的数据？一个点击，例如，它会读取来自一个新的数据文件中的数据，并添加更多的节点如AJAX的曲线图。

我使用d3.tsv读取data.tsv，同一格式的许多文件之一。

我做了一个简单的图来说明我的问题。先谢谢了。

 ＆LT;脚本SRC =htt​​p://d3js.org/d3.v3.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
    VAR WIDTH = 400，
        高度= 200;

    VAR X = d3.scale.linear（）。范围（[0，宽度]），
        Y = d3.scale.linear（）范围（[身高，0]）;

    VAR SVG = d3.select（身体）
      .append（SVG）
        .attr（宽度，宽）
        .attr（高度，高度）;

    d3.tsv（data.tsv功能（错误数据）{
        如果（错误）console.warn（错误）;
        x.domain（d3.extent（数据，函数（Q）{返回q.xCoord;}））;
        y.domain（d3.extent（数据，函数（Q）{返回q.yCoord;}））;

        svg.selectAll（。点）
            .DATA（数据）
            。进入（）。追加（一圈）
                .attr（R，10）
                .attr（CX功能（D）{返回X（d.xCoord）;}）
                .attr（CY，函数（D）{返回Y（d.yCoord）;}）
    }）;
＆LT; / SCRIPT＆GT;
＆所述; A HREF =＃＆GT;更新图表＆所述; / a取代;
 

解决方案

试试这个。

  VAR WIDTH = 400，
        高度= 200;

    VAR X = d3.scale.linear（）。范围（[0，宽度]），
        Y = d3.scale.linear（）范围（[身高，0]）;

    VAR SVG = d3.select（身体）
      .append（SVG）
        .attr（宽度，宽）
        .attr（高度，高度）;

VAR数据源='data.tsv'，
dataSource2 ='data2.tsv';

功能updateChart（的资源文件）{

    d3.tsv（的资源文件，功能（错误数据）{
        如果（错误）console.warn（错误）;
        x.domain（d3.extent（数据，函数（Q）{返回q.xCoord;}））;
        y.domain（d3.extent（数据，函数（Q）{返回q.yCoord;}））;

        svg.selectAll（。点）
            .DATA（数据）
            。进入（）。追加（一圈）
                .attr（R，10）
                .attr（CX功能（D）{返回X（d.xCoord）;}）
                .attr（CY，函数（D）{返回Y（d.yCoord）;}）
    }）;
}

updateChart（数据源）;

//这里是你改变了数据..
d3.select（＃键）。在（点击，函数（）{
updateChart（dataSource2）
}）
 

How do I update the data on demand by changing the file d3 accesses? With a click, for example, it would read data from a new data file and add more nodes to the graph like AJAX.

I use d3.tsv to read in data.tsv, one of many files of the same format.

I made a simple graph to illustrate my question. Thanks in advance.

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

解决方案

Try this.

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)
})

这篇关于D3：如何通过改变数据文件源动态刷新的图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！