Javascript D3带日期的平移图

我试图得到一个基于多行日期的图表，很好地跨越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);

此外，如果您直接单击背景，鼠标事件似乎根本无法到达控件

我读了一些关于这方面的例子，每个例子似乎都采用了一种截然不同的方法，我已经尝试过了，但没有一种方法对我的图表有效

可能有许多问题阻碍了这项工作的开展，因此我认为最好的方法是在JSFIDLE中说明这个问题

---

我试图实现的是，当有大量数据要可视化时，图表可以适应数据集，并允许数据扩展到图表的边界之外。

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

---

从这里开始，如何设置xAxis的初始“缩放级别”？我希望他先把观点“分散”开来。