Question

我一直在努力想要这个例子：

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

example

...与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", 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"]);
        }
    });


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

Answer 1

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

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

需要更改为

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

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

svg.datum(data.data);

d3.js差异图表示例如何与json数据一起使用？

1 个答案: