javascript - d3.js:在下拉列表更改时加载不同的 JSON 数据集

Question

我找到了这个 snippet在别人的question这正是我想要的 - 一个折线图用于在多个数据集之间切换的下拉框。问题是，我想从 php 生成的 JSON 文件外部加载，但我真的不确定我该怎么做。

d3.taos = function (config) {

    // Margins and graph formatting.
    var margin = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 60 },

        width = 960 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom,
        x = d3.time.scale(),    // different scaling.
        y = d3.scale.linear(),
        xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5),
        yAxis = d3.svg.axis().scale(y).orient("left").ticks(5),
        line = d3.svg.line(),
        color = d3.scale.category10(),
        zoom = d3.behavior.zoom().scaleExtent([0.5, 50]);


    // The chart itself.
    var chart = function (selection) {
        dataset = selection.data()[0];

        // Select the svg element, if it exists.
        var svg = selection.selectAll("svg").data([dataset])
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);

        // Otherwise, create the skeletal chart.
        var gEnter = svg.enter().append("svg")
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // Rendering both axes.
        gEnter.append("g").attr("class", "x axis");
        gEnter.append("g").attr("class", "y axis");

        gEnter.append("defs").append("clipPath")
            .attr("id", "clip")
            .append("rect")
            .attr("id", "clip-rect")
            .attr("x", "0")
            .attr("y", "0")
            .attr("width", width)
            .attr("height", height);

        x.range([0, width])
            .domain(d3.extent(d3.merge(dataset), function (d) {
                return d.x;
            }))

        y.range([height, 0])
            .domain(d3.extent(d3.merge(dataset), function (d) {
                return d.y;
            }))

        var g = svg.select("g");

        // Update the x-axis.
        g.select(".x.axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        // Update the y-axis.
        g.select(".y.axis")
            .call(yAxis);

        // Define lines
        line = d3.svg.line()
            .x(function (d) {
                return x(d.x);
            })
            .y(function (d) {
                return y(d.y);
            })

        var path = g.selectAll(".line")
            .data(dataset)
            .enter().append("path")
            .style("stroke", function (d, i) {
                return color(i)
            });

        path.attr("class", "line")
            .attr("d", line)
            .attr("clip-path", "url(#clip)");

        // Update the clip rectangle
        g.select("#clip-rect")
            .attr("width", width)
            .attr("height", height);

        // Update the line path.
        g.selectAll(".line")
            .attr("d", line);

        zoom.x(x).y(y)
            .on("zoom", draw);

        // Rect for zoom.
        gEnter.append("rect")
            .attr("class", "rectzoom")
            .attr("width", width)
            .attr("height", height)
            .call(zoom);

        function draw() {
            g.select(".x.axis").call(xAxis);
            g.select(".y.axis").call(yAxis);
            g.selectAll("path.line").attr("d", line);
            //g.select("#clip-rect").attr("width",width).attr("height",height);
        }

        /*
         * Methods
         */

        chart.width = function (w) {
            if (!arguments.length) return width;
            width = w;
            return this;
        };

        chart.height = function (h) {
            if (!arguments.length) return height;
            height = h;
            return this;
        };

        return chart

    } // chart

    return chart

}; // d3.taos





/*
 * Main
 */

// for json: 


// New instance
var t = d3.taos();

var f = function () {}



var data = d3.json("api.json?id=1", function(error, data) {
    if (error) return console.warn(error);
    // Creation
    d3.select("svg#chart")
        .datum(data)
        .attr("x", function(d) { x(d.x) })
        .call(t);
});

// Update
d3.select("select").on("change", function () {

    var val = $("select#dataset").val();



    val == "dataset1" ? dataset = dataset1 : dataset = dataset2;

    console.log("Dataset changed: " + val);

    d3.select("svg#chart")
        .datum(dataset)
        .call(t.width(800));


});

还有 HTML 代码...

    <select id="dataset">
        <option value="1" selected>Dataset 1</option>
        <option value="2">Dataset 2</option>
        <option value="3">Dataset 3</option>
    </select>

示例 JSON 数据集，例如api.json?id=1

{

        "usability_index": [
            {"x": 1397220093000, "y": 7},
            {"x": 1397222093000, "y": 21},
            {"x": 1397224093000, "y": 13},
            {"x": 1397226093000, "y": 23}
        ]

}

我探索了 d3.json() 但我不太确定如何动态加载它，例如默认数据集选项更改为数据集 3，从 api.json?id=1 到 api.json?id=3。

我是 d3.js 的新手，非常感谢这里的一些指导!

Answer 1

您可以尝试这样的操作，但要使用 library that makes reusable charts基于 d3.js。

以下是您如何能够 load data 的示例通过 API 调用

 var chart = c3.generate({
    data: {
        url: 'api.json?id=1',
        mimeType: 'json'
    }
});

请注意，c3.js 要求您的 JSON 格式如下:

  {
    "line1": [220, 240, 270, 250, 280],
    "line2": [180, 150, 300, 70, 120],
    "line3": [200, 310, 150, 100, 180]
}

因此，您需要在加载 JSON 数据之前对其进行解析和重新格式化。

并附加您可以选择重新生成或将更多行加载到图表中的事件处理程序。