encontré estoretazo en el de otra personapregunta que hace exactamente lo que quiero: un gráfico de líneas con un cuadro desplegable para cambiar entre múltiples conjuntos de datos. La cuestión es que quiero cargar externamente desde un archivo JSON generado por php, pero realmente no estoy seguro de cómo puedo hacer eso.

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


});

Y el código HTML ...

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

Conjunto de datos JSON de muestra, p.api.json?id=1

{

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

}

Exploré cond3.json() pero no estoy muy seguro de cómo cargarlo dinámicamente cuando, p. la opción predeterminada del conjunto de datos se cambia a Conjunto de datos 3, deapi.json?id=1 aapi.json?id=3.

¡Soy realmente nuevo en d3.js y realmente agradecería alguna orientación aquí!