ich habe das gefundenSchnipsel in jemand anderemFrage was genau das macht, was ich will - ein Liniendiagramm mit einem Dropdown-Feld zum Umschalten zwischen mehreren Datensätzen. Die Sache ist, ich möchte stattdessen extern aus einer von PHP generierten JSON-Datei laden, bin mir aber nicht sicher, wie ich das machen kann.

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


});

Und der HTML-Code ...

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

Beispiel eines JSON-Datensatzes von z.api.json?id=1

{

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

}

Ich habe mit erforschtd3.json() aber ich bin nicht ganz sicher, wie ich es dynamisch laden soll, wenn z. Die Standard-Dataset-Option wurde von in Dataset 3 geändertapi.json?id=1 zuapi.json?id=3.

Ich bin wirklich neu in d3.js und würde mich über eine Anleitung hier sehr freuen!