Line chart axis zoom

0
votes

I've got some problems with my d3 visualization. I'm trying to do a line chart that shows a development over 15 years.

First problem is that the x-axis does't scale depending on the zoom. I've used this to get started: http://bl.ocks.org/mbostock/4dc8736fb1ce9799c6d6 But I don't know why my axis doesn't zoom.

Second, the axis labeling is wrong, it should be the week and the year (e.g.01-2016)

And the last: What opportunities do I have, if there is some data missing, for example the data for the year 2013? Can I have a break in the chart, so that there is just a white space for this year?

Here is the HTML

<!doctype html>
<html>
  <head>  
    <link rel="stylesheet" href="main.css">
    <script src="//d3js.org/d3.v3.min.js"></script>
    <title>Test Tool</title> 
  </head> 

  <body>  
    <!--MAIN-->
    <main>

    <!--LINE CHART -->
    <script>
    // Set the dimensions of the canvas / graph
    var margin = {top: 10, right: 20, bottom: 30, left: 50},
        width = 1000 - margin.left - margin.right,
        height = 570 - margin.top - margin.bottom;

    // Set the ranges
    var x = d3.time.scale().domain([-width / 2, width / 2])
        .range([0, width]);
    var y = d3.scale.linear().domain([-height / 2, height / 2])
        .range([height, 0]);


    // Define the axes
    var xAxis = d3.svg.axis().scale(x)
        .orient("bottom").ticks(10);

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

    var zoom = d3.behavior.zoom()
        .x(x)
        .y(y)
        .scaleExtent([1, 10])
        .on("zoom", zoomed);

    var drag = d3.behavior.drag()
        .origin(function(d) { return d; })
        .on("dragstart", dragstarted)
        .on("drag", dragged)
        .on("dragend", dragended);

    var area = d3.svg.area()
        .x(function(d) { return x(d.meldewoche); })
        .y0(height)
        .y1(function(d) { return y(d.faelle); })
        .interpolate("basis");

    var areaflip = d3.svg.area()
        .x(function(d) { return x(d.meldewoche); })
        .y0(height)
        .y1(function(d) { return y(-d.faelle); })
        .interpolate("basis");

    // Define the line
    var valueline = d3.svg.line()
        .x(function(d) { return x(d.meldewoche); })
        .y(function(d) { return y(d.faelle); })
        .interpolate("basis");

    var valuelineflip = d3.svg.line()
        .x(function(d) { return x(d.meldewoche); })
        .y(function(d) { return y(-d.faelle); })
        .interpolate("basis");

    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 + ")")
            .call(zoom); 

    var container = svg.append("g");

    var rect = svg.append("rect")
        .attr("width", width)
        .attr("height", height)
        .style("fill", "none")
        .style("pointer-events", "all");

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

    // Add the Y Axis
    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);

    // Get the data
    d3.csv("data-hanta-gesamt.csv", function(error, data) {
        data.forEach(function(d) {
            // Parse the date / time
            var parseDate = d3.time.format("%W-%Y").parse;
            d.meldewoche = parseDate(d.meldewoche);
            d.faelle = +d.faelle; 
        });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.meldewoche; }));
    y.domain([0, d3.max(data, function(d) { return d.faelle+550; })]);

    // Add the valueline path.
    container.append("path")
            .attr("class", "line")
            .attr("d", valueline(data))
            .attr("transform", "translate(0,-265)");
    container.append("path")
            .attr("class", "lineflip")
            .attr("d", valuelineflip(data))
            .attr("transform", "translate(0,-265)");

    container.append("path")
            .datum(data)
            .attr("class", "area")
            .attr("d", area)
            .attr("transform", "translate(0,-265)"); 
    container.append("path")
            .datum(data)
            .attr("class", "areaflip")
            .attr("d", areaflip)
            .attr("transform", "translate(0,-265)");

    });


    //ZOOM
    function zoomed() {
        container.select(".x axis").call(xAxis);
        container.select(".y axis").call(yAxis); 
        //svg.selectAll('.line').attr('d', line)  
      container.attr("transform", "translate(" + d3.event.translate[0] + ",0)scale(" + d3.event.scale + ",1)");

    }

    function dragstarted(d) {
      d3.event.sourceEvent.stopPropagation();
      d3.select(this).classed("dragging", true);
    }

    function dragged(d) {
      d3.select(this)
          .attr("cx", d.x = d3.event.x)
          .attr("cy", d.y = d3.event.y);
    }

    function dragended(d) {
      d3.select(this).classed("dragging", false);
    }


    </script>
    </main>     
  </body>
</html>

And the CSS:

     body {
        background: #E1E2DD;
        color: #333;
        font: 1em/1em "Helvetica Neue";
      }

      #main {
        float: left;
        padding: 3em;
        width: 65%;
      }
      #footer {
        padding: 1em;
        text-align: right;
        width:65%; 
      }

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

.x.axis path {
    display: none;
}

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

.lineflip {
        fill: none;
        stroke: steelblue;
        stroke-width: 1.5px;
}

.area {
    fill: lightsteelblue;
      stroke-width: 0;
      fill-opacity: .67;
}

.areaflip {
    fill: lightsteelblue;
      stroke-width: 0;
      fill-opacity: .67;
}

The csv looks like this:

meldewoche,faelle
01-2001,2
03-2001,1
04-2001,2
05-2001,2
07-2001,1
08-2001,6
09-2001,1
...
1
javascriptd3.jssvg

1 Answers

0
votes

You just need to small changes to fix the issues you mentioned.

  1. Issue 1: the x-axis doesn't scale in response to the zoom. The problem you're having comes from how you are updating the x- and y-axes in zoomed. In particular, your current code tries to select the axes from container:

    container.select(".x axis").call(xAxis);
container.select(".y axis").call(yAxis);

    However, the axes are not children of container. Furthermore, you replaced the . required to select the axes by the class "axis" with a space. If instead you select the axes as children of the svg and setting the class selector properly, then your zoom behavior will work:

    svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);

  2. Issue 2: The x-axis labeling is wrong. This problem stems from the fact that you are adding the x-axis before loading your data. Thus, the domain of the x-axis hasn't been set using the dates of your data.

    The solution to this problem is to move all of the code that relies on the x-axis into your d3.csv. This way, when you add the axis or even when you zoom, the domain of the scale x for the x-axis has already been set properly. Here's the updated Javascript that's working for me.

// Set the dimensions of the canvas / graph var margin = { top: 10, right: 20, bottom: 30, left: 50 }, width = 1000 - margin.left - margin.right, height = 570 - margin.top - margin.bottom;

// Set the ranges
var x = d3.time.scale().domain([-width / 2, width / 2])
  .range([0, width]);
var y = d3.scale.linear().domain([-height / 2, height / 2])
  .range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
  .orient("bottom").ticks(10);

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

// Get the data
d3.csv("data-hanta-gesamt.csv", function(error, data) {
  data.forEach(function(d) {
    // Parse the date / time
    var parseDate = d3.time.format("%W-%Y").parse;
    d.meldewoche = parseDate(d.meldewoche);
    d.faelle = +d.faelle;
  });


  var drag = d3.behavior.drag()
    .origin(function(d) {
      return d;
    })
    .on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended);

  var area = d3.svg.area()
    .x(function(d) {
      return x(d.meldewoche);
    })
    .y0(height)
    .y1(function(d) {
      return y(d.faelle);
    })
    .interpolate("basis");

  var areaflip = d3.svg.area()
    .x(function(d) {
      return x(d.meldewoche);
    })
    .y0(height)
    .y1(function(d) {
      return y(-d.faelle);
    })
    .interpolate("basis");

  // Define the line
  var valueline = d3.svg.line()
    .x(function(d) {
      return x(d.meldewoche);
    })
    .y(function(d) {
      return y(d.faelle);
    })
    .interpolate("basis");

  var valuelineflip = d3.svg.line()
    .x(function(d) {
      return x(d.meldewoche);
    })
    .y(function(d) {
      return y(-d.faelle);
    })
    .interpolate("basis");

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) {
    return d.meldewoche;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.faelle + 550;
  })]);

  var zoom = d3.behavior.zoom()
    .x(x)
    .y(y)
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

  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 + ")")
    .call(zoom);

  var container = svg.append("g");

  var rect = svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all");

  // Add the Y Axis
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

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

  // Add the valueline path.
  container.append("path")
    .attr("class", "line")
    .attr("d", valueline(data))
    .attr("transform", "translate(0,-265)");
  container.append("path")
    .attr("class", "lineflip")
    .attr("d", valuelineflip(data))
    .attr("transform", "translate(0,-265)");

  container.append("path")
    .datum(data)
    .attr("class", "area")
    .attr("d", area)
    .attr("transform", "translate(0,-265)");
  container.append("path")
    .datum(data)
    .attr("class", "areaflip")
    .attr("d", areaflip)
    .attr("transform", "translate(0,-265)");


  //ZOOM
  function zoomed() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);
    //svg.selectAll('.line').attr('d', line)  
    container.attr("transform", "translate(" + d3.event.translate[0] + ",0)scale(" + d3.event.scale + ",1)");

  }

  function dragstarted(d) {
    d3.event.sourceEvent.stopPropagation();
    d3.select(this).classed("dragging", true);
  }

  function dragged(d) {
    d3.select(this)
      .attr("cx", d.x = d3.event.x)
      .attr("cy", d.y = d3.event.y);
  }

  function dragended(d) {
    d3.select(this).classed("dragging", false);
  }
});