ajax - How would d3.js difference chart example work with json data?

Question

Welcome To Ask or Share your Answers For Others

ajax - How would d3.js difference chart example work with json data?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

ajax - How would d3.js difference chart example work with json data?

I have been struggling to get this example:

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

example

...to work with json so I can use it in a portlet with live data. I can see the data elements if I do an alert but the component isn't rendering. I only get the y axis and its label to show up.

The part that may be wrong is:

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

taken from the html file

    <!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 (oF)");
    });
     </script>

using the following data.json file

     {"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},

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T20:04:48+0000

The problem is that all your data is nested in a data element. You need to update the code to reflect that. Specifically, the lines

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

need to be changed to

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

Categories

ajax - How would d3.js difference chart example work with json data?

ajax - How would d3.js difference chart example work with json data?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags