重新加载一个 csv 文件并用它调用相同的视图

Reload a csv file and call the same view with it

我有两个模板(initial.htmlindex.html),其中包含一个表单。我使用此表单中的数据生成一个 csv (data.csv),然后在 index.html 中读取它,这要感谢 d3parcoords.js。每个新提交都会生成一个新的 data.csv

问题是,在第一次调用时,一切似乎都正常,但是当我尝试使用新值提交表单时,可视化效果并没有改变(即使文件 data.csv 在我提交时似乎发生了变化使用 TextEdit 打开它)

此外,我提供给视图的数据(values in main.py)也没有改变。 我知道不建议在 POST 提交后调用相同的视图,但即使我尝试调用不同的视图,下面描述的两个问题仍然存在。

相关部分代码如下:

main.py

@app.route('/', methods=['POST','GET'])
def main():

    global maxDepth
    global numberOfRelated

    if request.method=='POST':
        url = request.form['url']
        maxDepth = int(request.form['depth'])
        numberOfRelated = int(request.form['numberOfRelated'])
        values = crawling(url,maxDepth,numberOfRelated)
        return render_template('index.html',var=values)
    return render_template('initial.html')

crawling函数

def crawling(url,maxDepth,numberOfRelated):

    start = time.time()

    initialID = get_id(url)

    videosId.append([0,initialID])
    getAllID(1,initialID)

    getVideoData(videosId)
    if os.path.exists('static/csv/data.csv'):
       os.remove('static/csv/data.csv')

    with open('static/csv/data.csv','wb') as csvData:
        dataWriter = csv.writer(csvData, delimiter='|', quotechar='|', quoting=csv.QUOTE_MINIMAL)
        dataWriter.writerow(['Depth']+['ID']+['Title']+['Popularity']+['Occurency'])
        for x in xrange(0,len(videosData)):
            dataWriter.writerow([videosData[x].level]+[videosData[x].id]+[videosData[x].title.encode("utf-8")]+[videosData[x].popularite]+[videosData[x].occurence])

    timeExecution = round(time.time() - start,1)
    mostFrequent = mostFrequentVideo()
    mostPopular = mostPopularVideo()
    initialVideo = videosData[0]

    return  [initialVideo,mostPopular, mostFrequent, len(videosData), timeExecution]

表格

  <nav class="navbar formSpace">
    <div class="container">
        <form class="form-inline" action="" method="POST">

        <div class="service form-group">
          <i class="fa fa-youtube fa-2x"></i>          
        </div>
          <div class="form-group">
            <input type="text" class="form-control" id="mainForm"  placeholder="https://www.youtube.com/watch?v=2HIuN5lxMCI" name="url" />
          </div>             
           <div class="form-group minorForm">
            <input  name='numberOfRelated' type="text" class="form-control"  placeholder="Number of suggestion" />
          </div>
          <div class="form-group minorForm">
            <input  name='depth' type="text" class="form-control"   placeholder="depth" />
          </div>

          <div class="form-group navbar-right">
            <button class="btn btn-success minorForm generate" type="submit"> Generate</button>
          </div> 
       </form>
    </div>
</nav>

main.js

 var pc0;

var blue_to_brown = d3.scale.linear()
  .domain([0, 5])
  .range(["red", "#3498db"])
  .interpolate(d3.interpolateLab);


d3.csv('static/csv/data.csv?_='+ Math.random(), function(data) {
pc0 = d3.parcoords()("#example0")
  .data(data)
    .showControlPoints(false)
    .hideAxis(["Title"])
    .hideAxis(["ID"])
    .composite("darker")
    .width(860)
    .color(function(d) { return blue_to_brown(d['Depth']);})
    .render()
    .alpha(0.35)
    .brushMode("1D-axes")
    .reorderable()
    .interactive();
});

Flask 提供静态文件,告诉浏览器相当积极地缓存 文件。默认是告诉浏览器将文件缓存 12 小时。

您可以通过向 URL;

添加一个随机值来绕过此缓存
d3.csv('static/csv/data.csv?_=' + Math.random(), function(data) {

现在浏览器每次都会将其视为一个新文件 URL 并且不会重复使用缓存文件。

好吧,我终于找到了解决办法

Martijn Pieters 建议的技巧非常有效,问题出在我的 CSV 格式上。 (我使用的是“|”而不是“,”,而 D3 不喜欢那样)