D3 Panning Chart with Dates

问题:

I'm trying to get a multi-line date based chart to pan nicely across the X date axis and I simply cannot figure out what the problem is.

I have the zoom behaviour set up in the code but it's just not performing as expected. If you click on a point in a line and scroll it appears to be scrolling the axis, if it click on the labels in the axis it also scrolls but the actual visualisation of data doesn't scroll.

var zoom = d3.behavior.zoom()
    .x(x)
    .scaleExtent([1, 1])
    .on("zoom", function () {
        svg.select(".x.axis").call(xAxis);
        svg.select(".lines").call(xAxis);
    });

svg.call(zoom);

Also if you click directly on the back ground the mouse event doesn't seem to make it's way to the control at all.

I read a few examples on this and each seem to take a vastly different approach which I've tried but none have worked for my chart.

There are possibly a number of issues that exist as barriers to getting this working so I thought the best way to illustrate the problem was in a JsFiddle.

D3 Chart Panning Fiddle

What I'm trying to achieve is when there is a lot of data to visualise the chart can adapt to the data set and allow the data to extend beyond the bounds of the chart.

回答1:

Currently clicking on the background does not allow panning because you have applied zoom behavior to the g element not to the svg.

var svg = d3.select('#host')
        .data(plotData)
        .append("svg")
        .attr("id", "history-chart")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .call(zoom);

Right now on zoom you have updated x and y axes but not the visualization. So you have update the lines and circles also like this.

var zoom = d3.behavior.zoom()
        .x(x)
        .scaleExtent([1, 1])
        .on("zoom", function () {
            svg.select(".x.axis").call(xAxis);
            svg.select(".lines").call(xAxis);
            svg.selectAll("path.lines")
               .attr("d", function(d) { return line(d.values); });
            svg.selectAll("circle")           
               .attr("cx", function(d) { return x(d.date); })                              
               .attr("cy", function(d) { return y(d.value); }); 
        });

Since you are panning the map you will have to use clip path for restricting visualization from moving outside the chart

var clip = svg.append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);

Apply clip path to the g elment which contains lines and cicrles.

 var attribute = svg.selectAll(".attribute")
        .data(plotData)
        .enter().append("svg:g")
        .attr("clip-path", "url(#clip)")
        .attr("class", "attribute");