CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
lane0335
lane0335

Reputation: 125

d3.js : Responding to Mousewheel zooms Appropriately

I am working through an introductory project in d3. From a comma-separated list I am reading data of the form . I can get the data to show initially without issue. However, when I zoom in or out using the mouse wheel two things happen:

I've included all of my source code at the bottom of this post, but I'll highlight the items that I think are important. Keep in mind that I'm not really sure what's important, as I'm a complete novice to d3.

When a mousewheel event is received this function is called

function redraw() {
  drawAxes();
  redrawBars();
}

drawAxes() looks like this:

function drawAxes() {
  chart.select(".x.axis").call(xAxis);
  chart.select(".y.axis").call(yAxis);
}

redrawBars() looks like this:

function redrawBars() {
  chart.selectAll("g.data_bar")
    .attr("height", function(d) { return yAxisScale(maxPval - d.pval); })
    .attr("transform", function(d) { return "translate(0," + yAxisScale(d.pval) + ")"; } );
}

The data is of the following form: timestamp,power_val

2015-04-14 18:49:17, 14388
2015-04-14 18:49:18, 14388
2015-04-14 18:49:19, 14456
2015-04-14 18:49:20, 14456
2015-04-14 18:49:21, 14289
2015-04-14 18:49:22, 14289
2015-04-14 18:49:36, 16106
2015-04-14 18:53:36, 6463
2015-04-14 18:53:37, 6463
2015-04-14 18:53:38, 6425
2015-04-14 18:53:39, 6425
2015-04-14 18:53:40, 6498
2015-04-14 18:53:41, 3848
2015-04-14 18:53:42, 3848
2015-04-14 18:53:43, 3848
2015-04-14 18:53:44, 3713
2015-04-14 18:53:45, 3713
2015-04-14 18:53:46, 3677
2015-04-14 18:53:47, 3677

Let me know if there's anything else I need to include or describe. I realize my code is pretty ugly at this point.

/*
 * Variables with no dependence on data.
 */
var barWidth = 1,
    dateFormatter = d3.time.format("%Y-%m-%d %H:%M:%S"),
    margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

/*
 * Variables that do depend on data.
 */
 var maxPval = -1;

/*
 * Create scales for axes, and axes themselves
 */
var xAxisScale = d3.time.scale().range([0, width]),
    yAxisScale = d3.scale.linear().range([height, 0]),
    xAxis = d3.svg.axis()
      .scale(xAxisScale)
      .orient("bottom"),
    yAxis = d3.svg.axis()
      .scale(yAxisScale)
      .orient("left");

// Zoom behavior
var zoom = d3.behavior.zoom()
      .x(xAxisScale)
      .y(yAxisScale)
      .scaleExtent([0.1,1000])
      .on("zoom", zoomed);

/*
 * Function called by mousewheel event listener.
 */
function zoomed() {
  console.log("mousewheel event received.");
  redraw();
} 

// Compute space for chart.
var chart = d3.select(".chart")
    .attr("width", (width + margin.left + margin.right))
    .attr("height", (height + margin.top + margin.bottom))
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);

// Add axes to page
chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + margin.left + ", " + height + ")")
    .call(xAxis);
chart.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + margin.left + ", " + 0 + ")")
    .call(yAxis);

/*
 * Initialize axes based on times and power values passed to graph.
 */
function initAxes(data) {
  var xAxisExtent = d3.extent(data, function(d) { return +d.date; } );
  xAxisScale.domain([new Date(xAxisExtent[0]), new Date(xAxisExtent[1])]);
  yAxisScale.domain([0, d3.max(data, function(d) { return d.pval; })]); 
  drawAxes();
}

/*
 * Re-draw the bar graph to adjust for zoom event.
 */
function drawAxes() {
  chart.select(".x.axis").call(xAxis);
  chart.select(".y.axis").call(yAxis);
}

/*
 * Intialize bar graph.
 */
function initBars(data) {
  chart.selectAll("g.data_bar")
    .data(data)
    .enter()
    .append("g")
      .attr("transform", 
             function(d) {
                console.log(d.date);
                return "translate(" + (xAxisScale(d.date) + margin.left) + ",0)";
             })
      .attr("class", "data_bar")
      .append("rect")
        .attr("width", barWidth - 0.1)
        .attr("height", function(d) { return yAxisScale(maxPval - d.pval); })
        .attr("transform", function(d) { return "translate(0," + yAxisScale(d.pval) + ")"; } );
}

/*
 * Redraw all elements on the page in response to a mousewheel event.
 */
function redraw() {
  drawAxes();
  redrawBars();
}

/*
 * Redraw bars after scale changed by mousewheel event.
 */
function redrawBars() {
  chart.selectAll("g.data_bar")
    .attr("height", function(d) { return yAxisScale(maxPval - d.pval); })
    .attr("transform", function(d) { return "translate(0," + yAxisScale(d.pval) + ")"; } );
}

/*
 * Called when reading in data file in function immediately after this.
 * Ensure power values are numbers not strings.
 * Ensure timestamps are javascript Date objects.
 */
function selector(d) {
    d.pval = +d["power_val"];
    d.date = dateFormatter.parse(d["timestamp"]);
    return d;
}


// Read in data file.
d3.csv("out_file", selector, function(error, data) {

    // Check for errors.
    if (error) {
        console.log("error reading csv file.");
        return;
    }

    // Set maxPval
    maxPval = d3.max(data, function(d) { return d.pval; });
    console.log(maxPval);

    initAxes(data);
    initBars(data);
});
 body {
  background-color: darkseagreen;
 }

.chart rect {
  fill: black;
}

.chart text {
  fill: black;
  font: 3px sans-serif;
  text-anchor: start;
}

.axis text {
  font: 6px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: white;
  shape-rendering: crispEdges;
}
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>D3 Bar Chart</title>
  <link rel="stylesheet" type="text/css" href="zoom_bar_chart.css">
  <script src="http://d3js.org/d3.v3.min.js"  charset="utf-8"></script>
</head>

<body>
  <svg class="chart"></svg>
  <script src="zoom_bar_chart.js" charset="utf-8"></script>
</body>
</html>

Upvotes: 4

Views: 164

Answers (1)

Mark
Mark

Reputation: 108512

Couple things:

  • You are assigning your axis to the zoom before setting the domain. This is the root of your problems.
  • You draw the bars oddly. You wrap each rect in a g to position in the x direction and then use the rect to set the y. This isn't breaking anything but it's easier to just position the rect.
  • You don't set any new x position on zoom.

Relevant changes:

var zoom = d3.behavior.zoom()
  .on("zoom", zoomed);

...

function initAxes(data) {
  var xAxisExtent = d3.extent(data, function(d) {
    return +d.date;
  });
  xAxisScale.domain([new Date(xAxisExtent[0]), new Date(xAxisExtent[1])]);
  yAxisScale.domain([0, d3.max(data, function(d) {
    return d.pval;
  })]);
  zoom.x(xAxisScale);
  zoom.y(yAxisScale);
  drawAxes();
}

...

function redrawBars() {
  chart.selectAll(".data_bar")
    .attr("transform", function(d) {
      return "translate("+(xAxisScale(d.date) + margin.left)+"," + yAxisScale(d.pval) + ")";
    })
    .attr("height", function(d) {
      return (height - yAxisScale(d.pval));
    });
}

All together here.

Upvotes: 2

Related Questions