d3.js: tải các bộ dữ liệu JSON khác nhau về thay đổi thả xuống

Question

Tôi đã tìm thấy số snippet này trong một người khác question, thực hiện chính xác những gì tôi muốn - biểu đồ dạng đường với hộp thả xuống để chuyển đổi giữa nhiều bộ dữ liệu. Vấn đề là, tôi muốn tải bên ngoài từ một tệp JSON được tạo ra bằng php thay vào đó nhưng tôi thực sự không chắc chắn làm thế nào tôi có thể làm điều đó.

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


}); 

Và mã HTML ...

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

mẫu JSON tập dữ liệu từ ví dụ api.json?id=1

{ 

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

} 

tôi khám phá với d3.json() nhưng tôi không hoàn toàn chắc chắn làm thế nào để đi về tải nó tự động khi ví dụ tùy chọn tập dữ liệu mặc định được thay đổi thành Dataset 3, từ api.json?id=1 thành api.json?id=3.

Tôi thực sự mới với d3.js và thực sự đánh giá cao một số hướng dẫn tại đây!

Answer 1

Bạn có thể thử một cái gì đó như thế này, nhưng thay vì sử dụng một số library that makes reusable charts dựa trên d3.js.

Sau đây là một ví dụ về cách bạn có thể load data qua API gọi

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

Lưu ý rằng c3.js đòi hỏi bạn phải có JSON của bạn trong các định dạng:

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

Vì vậy, bạn cần để phân tích cú pháp và định dạng lại dữ liệu JSON của bạn trước khi bạn có thể tải dữ liệu đó vào.

Và đính kèm trình xử lý sự kiện mà bạn có thể chọn để tạo lại hoặc tải nhiều dòng hơn vào char t.