Question

我试图让基于多行日期的图表在X日期轴上很好地平移，我根本无法弄清楚问题是什么。

我在代码中设置了缩放行为，但它没有按预期执行。如果单击一行中的一个点并滚动它似乎是滚动轴，如果它点击轴上的标签，它也会滚动但实际的数据可视化不会滚动。

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);

此外，如果您直接点击背景，鼠标事件似乎根本无法实现控制。

我在这里读了几个例子，每个人都采用了一种截然不同的方法，但我没有尝试过这种方法。

可能存在许多问题作为阻碍其工作的障碍因此我认为解释问题的最佳方式是在JsFiddle中。

D3 Chart Panning Fiddle

我想要实现的是，当有大量数据可视化时，图表可以适应数据集并允许数据超出图表范围。

Answer 1

当前单击背景不允许平移，因为您已将缩放行为应用于g元素而不是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);

目前在变焦时你已经更新了x和y轴，但没有更新可视化。所以你也像这样更新了直线和圆圈。

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); }); 
        });

由于您要平移地图，因此您必须使用剪辑路径来限制可视化移动到图表之外

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);

将剪辑路径应用于包含线条和圆柱的元素。

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

D3日期图表与日期

1 个答案: