1

I'm looking to plot a set of boxes (over time, like a stock chart) but am having trouble getting them to zoom in/out along with the grid.

Im working off this example and trying to achieve the same effect of how the line on the chart zooms along with the grid. My code for plotting the boxes resides in the update() method (same place the line and circles are updated in the example)

 SimpleGraph.prototype.update = function () {
        var self = this;

        self.vis.selectAll("rect")
            .data(data.boxes)
            .enter().append("svg:rect")
            .attr("x", function(box) { return self.x(box.StartTimeStamp); })
            .attr("y", function(box) { return self.y(box.Top); })
            .attr("height", function(box) { return self.y(box.Bottom) - self.y(box.Top); })
            .attr("width", function(box) { return self.x(box.StartTimeStamp + 5*60000) - self.x(box.StartTimeStamp); });
 }

Here are my scales:

 self.x = d3.time.scale()
            .domain(d3.extent(data.boxes, function(box) { return box.StartTimeStamp]; }))
            .range([0, self.innerWidth]);

 self.y = d3.scale.linear() //inverted domain
            .domain([d3.max(data.boxes.map(function (box) { return box.Top; })),
                     d3.min(data.boxes.map(function (box) { return box.Bottom]; }))])
            .nice().range([0, self.innerHeight]).nice();

Other than the scales my code is mostly identical. The result is that the grid zooms accordingly but my boxes stay fixed. I've been playing around with setting the x,y,width,height on the boxes but I can't seem to get the calculation right.

Edit: Here's picture of result with a lot of data

enter image description here

parliament
  • 21,544
  • 38
  • 148
  • 238
  • 2
    You're only setting position values on *new* (entering) rectangles, not on updating rectangles. So nothing changes when you update. [Read this answer on how the to keep your `enter()` method chain separate from your update chain](http://stackoverflow.com/a/20754006/3128209). – AmeliaBR Feb 26 '14 at 15:58
  • Thanks it works. Do you noticed anything that may be causing this not to work when loading a lot of boxes? If so that can be the answer. They start to overlap once load a much larger array of them. – parliament Feb 27 '14 at 00:54
  • Can you post a picture of what you mean about overlap? I'd need to know more about how you're figuring out top/bottom positions as well. – AmeliaBR Feb 27 '14 at 05:40
  • @AmeliaBR Thanks for your repsonse, I posted a pic. Note each box is "1 minute wide" in the data and results in this when using 2 weeks worth of "1 minute"s – parliament Feb 28 '14 at 13:49
  • I'm still not clear on what your data represents, how you're figuring out positions, and what you *want* it to look like... Does it look fine when you're zoomed out, but not zoomed in? The code you posted should scale width and height with the change in x and y domain properly, but I don't know how you're determining the data values for top, bottom and start. – AmeliaBR Mar 02 '14 at 21:15

0 Answers0