ajax – d3.js差异图表示例如何与json数据一起工作？

发布时间：2020-12-16 02:45:42 所属栏目：百科来源：网络整理

导读：我一直在努力得到这个例子： http://bl.ocks.org/mbostock/3894205 …与json一起工作,这样我就可以在带有实时数据的portlet中使用它.如果我发出警报但组件未呈现,我可以看到数据元素.我只显示y轴及其标签. 可能出错的部分是： d3.json("data.json",function(

我一直在努力得到这个例子：

http://bl.ocks.org/mbostock/3894205

…与json一起工作,这样我就可以在带有实时数据的portlet中使用它.如果我发出警报但组件未呈现,我可以看到数据元素.我只显示y轴及其标签.

可能出错的部分是：

d3.json("data.json",function(error,data) {
    if(error) return console.warn(error);
    data.data.forEach(function(d) {
        d.date = parseDate(d.date);
        d["San Francisco"]= +d["San Francisco"];
        d["New York"] = +d["New York"];
        count++;
        if (count>360) {
            alert(d.date + " " + d["San Francisco"] + " " + d["New York"]);
        }
    });

取自html文件

<!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    body {
      font: 10px sans-serif;
    }

    .axis path,.axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    .x.axis path {
      display: none;
    }

    .area.above {
      fill: rgb(252,141,89);
    }

    .area.below {
      fill: rgb(145,207,96);
    }

    .line {
      fill: none;
      stroke: #000;
      stroke-width: 1.5px;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20,right: 20,bottom: 30,left: 50},width = 960 - margin.left - margin.right,height = 500 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%Y%m%d").parse;

    var x = d3.time.scale()
        .range([0,width]);

    var y = d3.scale.linear()
        .range([height,0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var line = d3.svg.area()
        .interpolate("basis")
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d["New York"]); });

    var area = d3.svg.area()
        .interpolate("basis")
        .x(function(d) { return x(d.date); })
        .y1(function(d) { return y(d["New York"]); });

    var svg = d3.select("body").append("svg")
        .attr("width",width + margin.left + margin.right)
        .attr("height",height + margin.top + margin.bottom)
      .append("g")
        .attr("transform","translate(" + margin.left + "," + margin.top + ")");
    var count =0;

    d3.json("data.json",data) {
    if(error) return console.warn(error);
    data.data.forEach(function(d) {
        d.date = parseDate(d.date);
        d["San Francisco"]= +d["San Francisco"];
        d["New York"] = +d["New York"];
        count++;
        if (count>360) {
            alert(d.date + " " + d["San Francisco"] + " " + d["New York"]);
        }
    });


      x.domain(d3.extent(data,function(d) { return d.date; }));

      y.domain([
        d3.min(data,function(d) { return Math.min(d["New York"],d["San Francisco"]); }),d3.max(data,function(d) { return Math.max(d["New York"],d["San Francisco"]); })
      ]);

      svg.datum(data);

      svg.append("clipPath")
          .attr("id","clip-below")
        .append("path")
          .attr("d",area.y0(height));

      svg.append("clipPath")
          .attr("id","clip-above")
        .append("path")
          .attr("d",area.y0(0));

      svg.append("path")
          .attr("class","area above")
          .attr("clip-path","url(#clip-above)")
          .attr("d",area.y0(function(d) { return y(d["San Francisco"]); }));

      svg.append("path")
          .attr("class","area below")
          .attr("clip-path","url(#clip-below)")
          .attr("d",area);

      svg.append("path")
          .attr("class","line")
          .attr("d",line);

      svg.append("g")
          .attr("class","x axis")
          .attr("transform","translate(0," + height + ")")
          .call(xAxis);

      svg.append("g")
          .attr("class","y axis")
          .call(yAxis)
        .append("text")
          .attr("transform","rotate(-90)")
          .attr("y",6)
          .attr("dy",".71em")
          .style("text-anchor","end")
          .text("Temperature (oF)");
    });
     </script>

使用以下data.json文件

{"data":[
     {"date":"20111001","New York":83.4,"San Francisco":82.7},{"date":"20111002","New York":78.1,"San Francisco":79.9},{"date":"20111003","New York":73.3,"San Francisco":79.1},{"date":"20111004","New York":75.7,"San Francisco":78.8},{"date":"20111005","New York":84.2,"San Francisco":78.7},{"date":"20111006","New York":78.8,"San Francisco":77},{"date":"20111007","New York":77.9,"San Francisco":76.7},{"date":"20111008","New York":81.8,"San Francisco":76.8},{"date":"20111009","New York":89.3,{"date":"20111010","New York":91.2,"San Francisco":80.1},{"date":"20111011","New York":88.7,"San Francisco":81.1},{"date":"20111012","San Francisco":81.5},{"date":"20111013","New York":83.1,"San Francisco":84.3},{"date":"20111014","New York":86.9,"San Francisco":87.1},{"date":"20111015","New York":81.7,"San Francisco":84.6},{"date":"20111016","San Francisco":81.6},{"date":"20111017","New York":82.8,{"date":"20111018","New York":80.8,"San Francisco":79.2},{"date":"20111019","New York":82.1,"San Francisco":78.9},{"date":"20111020","New York":85.1,"San Francisco":77.2},{"date":"20111021","New York":75.6,"San Francisco":76.4},{"date":"20111022","New York":74.4,"San Francisco":80.7},{"date":"20111023","San Francisco":85.1},{"date":"20111024","New York":74.8,"San Francisco":80.9},{"date":"20111025","San Francisco":76.1},{"date":"20111026","New York":74.6,"San Francisco":74.6},{"date":"20111027",{"date":"20111028","New York":62.5,"San Francisco":78.1},{"date":"20111029","New York":60.9,"San Francisco":77.5},{"date":"20111030","New York":58.6,"San Francisco":77.7},{"date":"20111031","New York":64.2,"San Francisco":75.1},{"date":"20111101","New York":69.6,"San Francisco":77.9},{"date":"20111102","New York":67.2,{"date":"20111103","New York":70.1,"San Francisco":76.2},{"date":"20111104","San Francisco":70.5},{"date":"20111105","New York":63.5,"San Francisco":71.3},{"date":"20111106","New York":63.8,"San Francisco":72.6},{"date":"20111107","New York":68.9,"San Francisco":71.4},{"date":"20111108","New York":75.5,"San Francisco":70.6},{"date":"20111109","New York":73.7,{"date":"20222220","New York":77.7,"San Francisco":75.6},{"date":"20222221","New York":68.5,"San Francisco":73.9},{"date":"20222222","New York":66.8,"San Francisco":74},{"date":"20222223","New York":71.1,"San Francisco":73.8},{"date":"20222224","New York":76.8,"San Francisco":73.5},{"date":"20222225","New York":79.7,"San Francisco":73.4},{"date":"20222226","New York":76.5,"San Francisco":72.2},{"date":"20222227","San Francisco":72.7},{"date":"20222228","New York":61.5,"San Francisco":73.1},{"date":"20222229","New York":64.3,"San Francisco":69},{"date":"20111120","New York":74.1,"San Francisco":70.4},{"date":"20111121","San Francisco":71.1},{"date":"20111122","New York":69.4,"San Francisco":72.3},{"date":"20111123",{"date":"20111124","New York":64.1,{"date":"20111125","New York":70.3,"San Francisco":71.5},{"date":"20111126","New York":72.1,"San Francisco":73.6},{"date":"20111127",{"date":"20111128","New York":77.2,"San Francisco":71},{"date":"20111129","New York":79.1,"San Francisco":69.5},{"date":"20111130","New York":70.6,"San Francisco":69.8},{"date":"20111201","San Francisco":80.4},{"date":"20111202","New York":63.9,"San Francisco":82.2},{"date":"20111203","New York":62.1,"San Francisco":78.3},{"date":"20111204",{"date":"20111205","New York":70.2,{"date":"20111206","New York":74.2,"San Francisco":69.9},{"date":"20111207","San Francisco":68.6},{"date":"20111208","New York":63.4,"San Francisco":66.4},{"date":"20111209","New York":62.2,{"date":"20111210","New York":65.1,"San Francisco":72.1},{"date":"20111211","New York":53.8,"San Francisco":68.8},{"date":"20111212","New York":56.8,"San Francisco":67.4},{"date":"20111213","San Francisco":67.2},{"date":"20111214","New York":61.9,"San Francisco":66.1},{"date":"20111215",{"date":"20111216","San Francisco":67.9},{"date":"20111217","New York":60.6,{"date":"20111218","New York":49.1,"San Francisco":69.1},{"date":"20111219","New York":53.7,"San Francisco":68.3},{"date":"20111220","New York":65.8,"San Francisco":69.3},{"date":"20111221","New York":67.4,"San Francisco":68.4},{"date":"20111222","San Francisco":73.3},{"date":"20111223","New York":67.8,"San Francisco":67.5},{"date":"20111224","New York":54.9,{"date":"20111225","New York":55.9,"San Francisco":68.9},{"date":"20111226","New York":63.6,"San Francisco":65.9},{"date":"20111227","New York":62.9,{"date":"20111228","New York":66.2,{"date":"20111229","New York":50.8,"San Francisco":70.9},{"date":"20111230","New York":60.8,"San Francisco":72.9},{"date":"20111231","New York":69.8,"San Francisco":70.1},{"date":"20120101","New York":66.3,{"date":"20120102","New York":63.2,{"date":"20120103","New York":50.3,"San Francisco":69.7},{"date":"20120104","New York":39.2,{"date":"20120105","New York":52.1,{"date":"20120106","New York":61.2,{"date":"20120107","New York":67.1,{"date":"20120108","New York":66.1,{"date":"20120109","New York":54.7,{"date":"20120110","New York":59.4,"San Francisco":71.6},{"date":"20120111","New York":60.4,{"date":"20120112","New York":65.4,"San Francisco":71.9},{"date":"20120113","New York":60.7,"San Francisco":73.7},{"date":"20120114","New York":50.4,{"date":"20120115","New York":43.9,{"date":"20120116","New York":42.6,"San Francisco":65.3},{"date":"20120117","New York":59.8,"San Francisco":63.6},{"date":"20120118","San Francisco":65},{"date":"20120119","New York":46.3,"San Francisco":67.3},{"date":"20120120","New York":52.8,{"date":"20120121","New York":47.4,{"date":"20120122","New York":45.1,{"date":"20120123",{"date":"20120124","New York":68.7,{"date":"20120125","New York":63.1,{"date":"20120126","New York":57.1,{"date":"20120127","New York":68.2,{"date":"20120128","New York":63.7,"San Francisco":70.3},{"date":"20120129","New York":60.1,{"date":"20120130","New York":58.0,{"date":"20120131","San Francisco":70},{"date":"20120201","New York":70.4,{"date":"20120202",{"date":"20120203","New York":57.5,{"date":"20120204","San Francisco":72},{"date":"20120205","New York":56.5,{"date":"20120206","New York":59.1,{"date":"20120207","San Francisco":74.3},{"date":"20120208",{"date":"20120209",{"date":"20120210","New York":58.3,{"date":"20120211","New York":56.9,{"date":"20120212","New York":49.7,{"date":"20120213","New York":53.1,{"date":"20120214","New York":59.6,{"date":"20120215","New York":62.3,{"date":"20120216","New York":59.7,"San Francisco":72.4},{"date":"20120217","New York":66.0,{"date":"20120218",{"date":"20120219","San Francisco":67.8},{"date":"20120220","New York":58.1,"San Francisco":68.7},{"date":"20120221",{"date":"20120222","New York":65.5,{"date":"20120223","San Francisco":74.1},{"date":"20120224","New York":62.7,"San Francisco":75.9},{"date":"20120225","New York":62.6,"San Francisco":71.7},{"date":"20120226","San Francisco":67.7},{"date":"20120227","San Francisco":65.4},{"date":"20120228","New York":65.9,"San Francisco":67},{"date":"20120229",{"date":"20120301","New York":61.3,{"date":"20120302","San Francisco":68.1},{"date":"20120303","New York":67.6,"San Francisco":70.7},{"date":"20120304","San Francisco":75},{"date":"20120305","New York":58.5,{"date":"20120306","New York":52.9,{"date":"20120307","New York":63.3,{"date":"20120308","New York":71.2,"San Francisco":69.2},{"date":"20120309",{"date":"20120310","New York":57.2,{"date":"20120311",{"date":"20120312","New York":68.8,{"date":"20120313","New York":72.6,{"date":"20120314","New York":80.5,"San Francisco":75.2},{"date":"20120315",{"date":"20120316","New York":64.7,{"date":"20120317","San Francisco":68.2},{"date":"20120318","San Francisco":67.1},{"date":"20120319","New York":73.1,"San Francisco":65.8},{"date":"20120320","New York":77.8,{"date":"20120321","New York":77.5,{"date":"20120322","New York":77.3,{"date":"20120323",{"date":"20120324","New York":75.8,{"date":"20120325","New York":68.4,{"date":"20120326",{"date":"20120327",{"date":"20120328","New York":69.7,{"date":"20120329",{"date":"20120330","New York":66.5,"San Francisco":74.5},{"date":"20120331",{"date":"20120401","New York":65.3,{"date":"20120402","New York":68.1,{"date":"20120403",{"date":"20120404","New York":81.0,{"date":"20120405","New York":70.7,{"date":"20120406","New York":68.0,{"date":"20120407","San Francisco":69.4},{"date":"20120408",{"date":"20120409","New York":78.3,{"date":"20120410","New York":75.0,{"date":"20120411","New York":69.0,{"date":"20120412","New York":71.7,{"date":"20120413","San Francisco":70.2},{"date":"20120414","New York":75.2,{"date":"20120415","New York":82.3,{"date":"20120416","New York":82.9,{"date":"20120417","San Francisco":73.2},{"date":"20120418","New York":79.0,"San Francisco":73},{"date":"20120419",{"date":"20120420","San Francisco":75.8},{"date":"20120421","New York":78.2,"San Francisco":78},{"date":"20120422","New York":72.4,"San Francisco":72.8},{"date":"20120423","New York":71.6,{"date":"20120424","New York":69.3,{"date":"20120425","New York":72.5,{"date":"20120426","New York":70.5,"San Francisco":75.3},{"date":"20120427","New York":71.9,{"date":"20120428","San Francisco":74.7},{"date":"20120429",{"date":"20120430",{"date":"20120501","New York":77.4,{"date":"20120502",{"date":"20120503",{"date":"20120504",{"date":"20120505","New York":77.0,{"date":"20120506","New York":76.6,"San Francisco":76.5},{"date":"20120507",{"date":"20120508",{"date":"20120509","New York":79.2,{"date":"20120510","New York":81.1,{"date":"20120511",{"date":"20120512","New York":84.1,{"date":"20120513","New York":85.3,{"date":"20120514","San Francisco":76},{"date":"20120515","New York":82.0,{"date":"20120516","New York":83.8,{"date":"20120517","New York":84.5,{"date":"20120518",{"date":"20120519","New York":82.6,{"date":"20120520","New York":86.2,{"date":"20120521","New York":82.7,{"date":"20120522","New York":83.7,{"date":"20120523","New York":86.4,{"date":"20120524",{"date":"20120525","New York":85.4,"San Francisco":72.5},{"date":"20120526","New York":89.4,{"date":"20120527","New York":91.9,{"date":"20120528","New York":94.4,{"date":"20120529","New York":95.9,{"date":"20120530","New York":92.9,{"date":"20120531","New York":92.5,{"date":"20120601","New York":87.2,"San Francisco":74.8},{"date":"20120602","New York":88.3,{"date":"20120603","New York":87.7,{"date":"20120604","New York":81.9,{"date":"20120605",{"date":"20120606",{"date":"20120607","New York":86.7,{"date":"20120608","San Francisco":74.4},{"date":"20120609","New York":92.2,{"date":"20120610","New York":92.6,"San Francisco":80},{"date":"20120611","New York":89.2,{"date":"20120612",{"date":"20120613",{"date":"20120614",{"date":"20120615","New York":88.5,{"date":"20120616","New York":87.5,{"date":"20120617",{"date":"20120618",{"date":"20120619",{"date":"20120620","New York":97.9,{"date":"20120621","New York":108.0,{"date":"20120622","New York":102.0,{"date":"20120623","New York":97.0,{"date":"20120624","New York":95.4,{"date":"20120625","New York":90.9,{"date":"20120626","New York":85.9,{"date":"20120627","New York":93.5,{"date":"20120628","New York":97.4,"San Francisco":76.6},{"date":"20120629","New York":99.6,{"date":"20120630","New York":104.0,"San Francisco":78.4},{"date":"20120701","New York":101.0,{"date":"20120702",{"date":"20120703","New York":100.0,{"date":"20120704","New York":97.8,{"date":"20120705","New York":106.0,{"date":"20120706","New York":99.9,"San Francisco":74.9},{"date":"20120707","New York":103.0,{"date":"20120708",{"date":"20120709",{"date":"20120710","New York":96.1,{"date":"20120711","New York":96.3,{"date":"20120712","New York":95.8,{"date":"20120713","New York":97.2,{"date":"20120714","New York":99.3,{"date":"20120715","New York":98.9,{"date":"20120716",{"date":"20120717",{"date":"20120718",{"date":"20120719","New York":95.1,"San Francisco":77.1},{"date":"20120720","New York":88.4,{"date":"20120721","San Francisco":77.6},{"date":"20120722",{"date":"20120723","New York":95.6,{"date":"20120724","San Francisco":77.8},{"date":"20120725","New York":98.4,{"date":"20120726",{"date":"20120727","New York":99.4,{"date":"20120728",{"date":"20120729",{"date":"20120730",{"date":"20120731","New York":93.6,{"date":"20120801","New York":95.0,"San Francisco":75.4},{"date":"20120802","New York":97.7,{"date":"20120803","New York":99.7,{"date":"20120804",{"date":"20120805",{"date":"20120806","San Francisco":78.2},{"date":"20120807","New York":95.7,{"date":"20120808",{"date":"20120809","New York":98.6,{"date":"20120810",{"date":"20120811","New York":98.5,{"date":"20120812","New York":98.8,{"date":"20120813",{"date":"20120814","New York":96.8,{"date":"20120815","New York":96.7,{"date":"20120816",{"date":"20120817","New York":97.6,{"date":"20120818",{"date":"20120819","New York":90.4,{"date":"20120820","New York":91.8,{"date":"20120821",{"date":"20120822","New York":94.7,{"date":"20120823","New York":94.6,"San Francisco":75.7},{"date":"20120824","New York":96.0,{"date":"20120825","New York":96.2,{"date":"20120826","New York":93.4,{"date":"20120827",{"date":"20120828",{"date":"20120829",{"date":"20120830",{"date":"20120831",{"date":"20120901",{"date":"20120902",{"date":"20120903",{"date":"20120904",{"date":"20120905",{"date":"20120906","New York":94.2,"San Francisco":76.3},{"date":"20120907",{"date":"20120908","New York":97.1,{"date":"20120909","New York":89.7,{"date":"20120910","New York":87.8,{"date":"20120911","New York":84.0,{"date":"20120912","New York":88.1,{"date":"20120913",{"date":"20120914","New York":90.0,{"date":"20120915",{"date":"20120916","New York":86.3,{"date":"20120917","New York":87.0,{"date":"20120918","New York":92.8,{"date":"20120919",{"date":"20120920",{"date":"20120921",{"date":"20120922","New York":85.5,{"date":"20120923","New York":85.7,{"date":"20120924","New York":80.4,{"date":"20120925","New York":83.2,{"date":"20120926",{"date":"20120927",{"date":"20120928",{"date":"20120929","New York":82.5,{"date":"20120930","San Francisco":75.1}]}

解决方法

问题是您的所有数据都嵌套在数据元素中.您需要更新代码以反映这一点.具体来说就行了

x.domain(d3.extent(data,function(d) { return d.date; }));

y.domain([
    d3.min(data,d["San Francisco"]); })
]);

svg.datum(data);

需要改为

x.domain(d3.extent(data.data,function(d) { return d.date; }));

y.domain([
    d3.min(data.data,d3.max(data.data,d["San Francisco"]); })
]);

svg.datum(data.data);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!