Javascript 在d3中放大图形上的交互

Javascript 在d3中放大图形上的交互,javascript,d3.js,Javascript,D3.js,我有建造X&Y轴的代码: var y = d3.scale.linear() .range([height*2, 0]); var yAxis = d3.svg.axis() .scale(y) .orient("left"); y.domain([-arr2, arr2]).nice(); var x = d3.time.scale().domain([minD, maxD]).range([0, width]); var xAxis =

我有建造X&Y轴的代码:

var y = d3.scale.linear()
        .range([height*2, 0]);

var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

y.domain([-arr2, arr2]).nice();

var x = d3.time.scale().domain([minD, maxD]).range([0, width]);

var xAxis = d3.svg.axis()
           .scale(x)
           .orient("bottom")
           .tickFormat(d3.time.format('%b %y'));

xAxis.ticks(d3.time.year, 1)

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
      .append("text")
    .attr("class", "label")
    .attr("x", width + 230)
    .attr("y", 10)
    .style("text-anchor", "end")
    .attr("font-family", "sans-serif")
    .attr("font-size", "30px")
    .text("Revision Date");

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
      .append("text")
    .attr("class", "label")
    .attr("transform", "rotate(-90)")
    .attr("x", 130)
    .attr("y", -10)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .attr("font-family", "sans-serif")
    .attr("font-size", "30px")
    .text("log(Lev)");
此外,我还有创建圆圈的代码:

var ARdot =  svg.selectAll(".dot")
    .data(ArticleData)
      .enter().append("circle")
    .attr("class", "dot")
    .attr("r", 12)
    .attr("cx", function(d) { return x(new Date(d.Rev_Date)); })
    .attr("cy", function(d) { return y(d.Log_Lev); })
    .style("fill", function(d) { return "SteelBlue";});


var TRdot =  svg.selectAll(".dot2")
    .data(TalkpageData)
      .enter().append("circle")
    .attr("class", "dot")
    .attr("r", 12)
    .attr("cx", function(d) { return x(new Date(d.Rev_Date)); })
    .attr("cy", function(d) { return y(-d.Log_Lev); })
    .style("fill", function(d) { return "LightSeaGreen";}); 
结果(当然,代码创建了行)是:

正如你所看到的,蓝点太密集了。 我不想添加放大镜头,这样用户就可以 放大到图形的某些部分以及圆和 X轴的值和Y轴的值的行为取决于放大


例如:离它越近,在一年中的几个月内,X轴的范围就越小,而在圆的范围内,它们之间的距离就越大。

你看了吗:?多亏了你的建议,我学会了如何放大和缩小轴。现在的问题是,这些圆不受缩放的影响,我可以做些什么来影响这些圆呢?下面是帮助创建“仅缩放轴”的代码:您看到了吗?如果您仍然被阻止,请在代码中发布一个JSFIDLE。我试图将代码复制到JSFIDLE,但无法上载运行期间使用的两个csv文件,因此JSFIDLE中没有可视化结果。以下是JSFIDLE: