I am currently working on developing a trend component that can zoom and pan into data fetched using d3.json. Here is the code I have written so far:
<script>
var margin = { top: 20, right: 80, bottom: 20, left: 50 },
width = $("#trendcontainer").width() - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var format = d3.time.format("%Y-%m-%d").parse;
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]);
// More code here...
</script>
The issue I'm facing is that when zooming or panning, my lines do not interact as expected. They remain static below the zoomable/pannable grid. In addition, one of the lines disappears while attempting to zoom/pan, and an error message appears in the console:
Error: Problem parsing d="" - referencing the following snippet, specifically the last line:
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
svg.select(".x.grid")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));
svg.select(".y.grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""));
svg.select(".line")
.attr("class", "line")
.attr("d", line);
};
Here's a snippet of the JSON data retrieved from the controller:
[{"Weight":0.0,"Speed":59.9,"Depth":362.24000,"Time":"2014-04-09T10:01:23","Id":0},{"Weight":10.0,"Speed":59.9,"Depth":394.07000,"Time":"2014-04-09T10:01:56","Id":1},
// More data here...
]
Currently, the trend in my view does not allow for the actual lines to zoom or pan. Only the grid overlay (black lines) does;
In order to simplify things, I have considered starting over and following the original example provided here. However, I am finding it challenging to integrate JSON-loaded data into this structure. I hope someone can assist me in resolving these issues :)