Javascript 在d3中放大图形上的交互
我有建造X&Y轴的代码: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 =
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: