将 AJAX json 数据传递给 D3答案

【问题标题】：Passing AJAX json data to D3将 AJAX json 数据传递给 D3
【发布时间】：2017-07-29 19:55:49
【问题描述】：

我正在尝试使用 AJAX XMLHttpRequest 将 JSON 数据传递给 D3 以构建图形。我的代码是：

<script>
    (function() {
        var url = "{% url 'airline_year_financial_data' %}";
        var httpRequest;
        makeRequest();

        // create and send an XHR request
        function makeRequest() {
            httpRequest = new XMLHttpRequest();
            httpRequest.onreadystatechange = responseMethod;
            httpRequest.open('GET', url)
            httpRequest.send()
        }
        // Handle XHR Response
        function responseMethod () {
            if (httpRequest.readyState === 4) {
                if (httpRequest.status === 200) {
                    updateUISuccess(httpRequest.responseText)
                    } else {
                        // Do something
                    }
            }
        }
        // Handle XHR Success
        function updateUISuccess(responseText) {
            var response = JSON.parse(responseText)
            console.log(response) // Correctly logs json data in console.
            console.log(typeof(response)) // Shows the type is 'object' in console.

           // Build D3 Chart
            d3.json(response, function (data) {
            var width = 500;
            var height = 300;
            var padding = 20;
            d3.select("body")
                .append("svg")
                    .attr("class", "waterfall-container")
                    .attr("width", width)
                    .attr("height", height)
                    .attr("style", "outline: thin solid")
            d3.select("svg")
                .selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                    .attr("x-axis", 200)
                    .attr("y-axis", 300)
                    .attr("width", 20)
                    .attr("height", 200)
                    .attr("fill", "blue")
               });
        }

    })();

我收到以下错误：

GET http://localhost:8000/[object%20Object] 404（未找到）

我假设默认情况下 D3 希望我将一些 URL 传递给 d3.json() 并且不想接受该对象。知道如何将 response (object) 传递给 D3 并将其用作构建图的数据吗？

【问题讨论】：

{% url 'airline_year_financial_data' %} 是 Django 模板吗，它实际解析为什么？
是的，它是 Django URL，但我刚刚达到了预期的结果，并将展示我对这个问题的答案，以帮助其他人为未来提供帮助。感谢您对此进行调查。

标签： javascript json ajax d3.js

【解决方案1】：

好的，我已经通过删除 d3.json 调用达到了预期的结果，因为我不必使用 d3 将 JSON 数据再次转换为 JSON。现在数据直接流向d3代码。

    var width = 500;
    var height = 300;
    var padding = 20;
    d3.select("body")
        .append("svg")
            .attr("class", "waterfall-container")
            .attr("width", width)
            .attr("height", height)
            .attr("style", "outline: thin solid")
    d3.select("svg")
        .selectAll("rect")
        .data(response) // Here I'm passing AJAX Data
        .enter()
        .append("rect")
            .attr("x-axis", 200)
            .attr("y-axis", 300)
            .attr("width", 20)
            .attr("height", 200)
            .attr("fill", "blue")

【讨论】：