使用 D3.js 和 AJAX 绘制数据答案

【问题标题】：Plot data using D3.js and AJAX使用 D3.js 和 AJAX 绘制数据
【发布时间】：2020-06-25 18:17:16
【问题描述】：

我想使用 D3.js 绘制虹膜数据集（iris.csv）。那么如何使用 AJAX 获取数据并将 responseText 发送到 D3 函数进行绘图。我正在使用烧瓶服务器。

烧瓶代码：

from flask import Flask, redirect, url_for, render_template, request

app = Flask(__name__)

@app.route("/plot")
def plotIris():
    return render_template("plot.html")

plot.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSV Test</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <script>
         
         .....// using get method in ajax how to get responseText and given responseText into D3 function for ploting?
         ...... //ajaxcode

         function plotIrisData(responseText) {
            var outerWidth = 300;
            var outerHeight = 250;
            var rMin = 5; // "r" stands for radius
            var rMax = 20;
            var xColumn = "sepal_length";
            var yColumn = "petal_length";
            var rColumn = "sepal_width";

            var svg = d3.select("body").append("svg")
                .attr("width", outerWidth)
                .attr("height", outerHeight);

            var xScale = d3.scaleLinear().range([0, outerWidth]);
            var yScale = d3.scaleLinear().range([outerHeight, 0]);
            var rScale = d3.scaleLinear().range([rMin, rMax]);

        function render(data){
            xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
            yScale.domain(d3.extent(data, function (d){ return d[yColumn]; }));
            rScale.domain(d3.extent(data, function (d){ return d[rColumn]; }));

            var circles = svg.selectAll("circle").data(data);
            circles.enter().append("circle");
            circles
                .attr("cx", function (d){ return xScale(d[xColumn]); })
                .attr("cy", function (d){ return yScale(d[yColumn]); })
                .attr("r",  function (d){ return rScale(d[rColumn]); });
            circles.exit().remove();
        }
    }
    </script>
  </body>
</html>

这里 plot.html 在脚本标签中使用 ajax 中的 get 方法如何获取 iris.csv 文件并使用 D3 进行绘图？

【问题讨论】：

标签： jquery ajax flask d3.js xmlhttprequest

【解决方案1】：

将您的 CSV 文件放在应用程序根目录中的静态文件夹中（如果您还没有，请创建一个），然后编写一个使用 Flask 的 send_from_directory 函数为其提供服务的视图函数，然后您可以使用通过 d3 的 d3.csv(...) 函数在客户端进行 AJAX 调用（参见示例 here）。

【讨论】：