我有 x 轴的缩放和平移功能，但我想为 y 轴添加平移功能。我尝试使用 d3.behavior.zoom 和 d3.event.translate[1] 来获取 y 平移值并使用它，但是当缩放发生时平移值会发生变化，而单击拖动确实会平移 y 轴，缩放也会平移 y 轴(以一种非直观的方式)。
我还尝试使用两个 d3.behavior.zoom 实例，一个用于 x 轴，一个用于 y 轴，但只有最后添加的一个在缩放事件中被调用。
这是一个适用于在 x 方向缩放和平移的示例，我也想添加 y 平移(但不是 y 缩放):
var x = d3.scale.linear()
.domain([0, 800])
.range([0, 800]);
var y = d3.scale.linear()
.domain([0, 800])
.range([0, 800]);
var rectangleSelector = d3.select('svg')
.append('g')
.selectAll('rect')
.data([[0, 0], [50, 50], [100, 100]])
.enter()
.append('rect')
.attr('fill', 'black')
.attr('x', d => x(d[0]))
.attr('y', d => y(d[1]))
.attr('width', d => x(d[0] + 40) - x(d[0]))
.attr('height', d => y(40));
d3.select('svg')
.call(d3.behavior.zoom().x(x).on('zoom', () => {
rectangleSelector
.attr('x', d => x(d[0]))
.attr('y', d => y(d[1]))
.attr('width', d => x(d[0] + 40) - x(d[0]))
.attr('height', d => y(40));
}));<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="800" height="800"></svg>
在此示例中，我尝试使用 d3.event.translate[1] 中的 y 值，它适用于拖动，但不良行为是根据用户鼠标缩放的位置也会发生变化y 轴的平移值。
var x = d3.scale.linear()
.domain([0, 800])
.range([0, 800]);
var y = d3.scale.linear()
.domain([0, 800])
.range([0, 800]);
var rectangleSelector = d3.select('svg')
.append('g')
.selectAll('rect')
.data([[0, 0], [50, 50], [100, 100]])
.enter()
.append('rect')
.attr('fill', 'black')
.attr('x', d => x(d[0]))
.attr('y', d => y(d[1]))
.attr('width', d => x(d[0] + 40) - x(d[0]))
.attr('height', d => y(40));
d3.select('svg')
.call(d3.behavior.zoom().x(x).on('zoom', () => {
var translateY = d3.event.translate[1];
rectangleSelector
.attr('x', d => x(d[0]))
.attr('y', d => y(d[1] + translateY))
.attr('width', d => x(d[0] + 40) - x(d[0]))
.attr('height', d => y(40));
}));<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="800" height="800"></svg>
最佳答案
JSFIDDLE:https://jsfiddle.net/sladav/o8vaecyn/
对于初学者来说，缩放行为处理 x 轴的平移和缩放，这由...处理
var zoom = d3.behavior.zoom()
.x(x)
.scaleExtent([1, 10])
.on("zoom", zoomed);
所以我们将使用缩放来处理 x 轴的东西。
对于 Y 轴，只是平移行为...
创建一个单独的拖动行为来捕获“dy”、移动 y 域并重新应用它。
添加拖动行为
var drag = d3.behavior.drag()
.on("drag", dragging)
让 y 尺度的域可变(我们将在拖动时修改它)
var yPan = 0;
var yMin = (-height / 2);
var yMax = (height / 2);
var y = d3.scale.linear()
.domain([yMin, yMax])
.range([height, 0]);
添加一个函数以在拖动事件时重新缩放 Y 轴
function dragging(d) {
yPan = d3.event.dy;
yMin += yPan;
yMax += yPan;
y.domain([yMin, yMax])
d3.select(".y.axis").call(yAxis)};
从您的 SVG 元素调用拖动功能
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom)
.call(drag);
关于javascript - D3 : Is it possible to zoom+pan one axis and only pan the other?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35215202/
我的瘦服务器配置了nginx，我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例，但找不到好的解决方案。有没有人能做到这一点？ 最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器，例如server{listen80;server
如何将send与+=一起使用？a=20;a.send"+=",10undefinedmethod`+='for20:Fixnuma=20;a+=10=>30 最佳答案 恐怕你不能。+=不是方法，而是语法糖。参见http://www.ruby-doc.org/docs/ProgrammingRuby/html/tut_expressions.html它说Incommonwithmanyotherlanguages,Rubyhasasyntacticshortcut:a=a+2maybewrittenasa+=2.你能做的最好的事情是:
我对如何计算通过{%assignvar=0%}赋值的变量加一完全感到困惑。这应该是最简单的任务。到目前为止，这是我尝试过的:{%assignamount=0%}{%forvariantinproduct.variants%}{%assignamount=amount+1%}{%endfor%}Amount:{{amount}}结果总是0。也许我忽略了一些明显的东西。也许有更好的方法。我想要存档的只是获取运行的迭代次数。 最佳答案 因为{{incrementamount}}将输出您的变量值并且不会影响{%assign%}定义的变量，我
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我有一个数组数组，想将元素附加到子数组。+=做我想做的，但我想了解为什么push不做。我期望的行为(并与+=一起工作):b=Array.new(3,[])b[0]+=["apple"]b[1]+=["orange"]b[2]+=["frog"]b=>[["苹果"],["橙子"],["Frog"]]通过推送，我将推送的元素附加到每个子数组(为什么？):a=Array.new(3,[])a[0].push("apple")a[1].push("orange")a[2].push("frog")a=>[[“苹果”、“橙子”、“Frog”]、[“苹果”、“橙子”、“Frog”]、[“苹果”、“
有没有办法让Ruby能够做这样的事情？classPlane@moved=0@x=0defx+=(v)#thisiserror@x+=v@moved+=1enddefto_s"moved#{@moved}times,currentxis#{@x}"endendplane=Plane.newplane.x+=5plane.x+=10putsplane.to_s#moved2times,currentxis15 最佳答案 您不能在Ruby中覆盖复合赋值运算符。任务在内部处理。您应该覆盖+，而不是+=。plane.a+=b与plane.a=
出于某种原因，heroku尝试要求dm-sqlite-adapter，即使它应该在这里使用Postgres。请注意，这发生在我打开任何URL时-而不是在gitpush本身期间。我构建了一个默认的Facebook应用程序。gem文件:source:gemcuttergem"foreman"gem"sinatra"gem"mogli"gem"json"gem"httparty"gem"thin"gem"data_mapper"gem"heroku"group:productiondogem"pg"gem"dm-postgres-adapter"endgroup:development,:t
我是Ruby和这个网站的新手。下面两个函数是不同的，一个在函数外修改变量，一个不修改。defm1(x)x我想确保我理解正确-当调用m1时，对str的引用被复制并传递给将其视为x的函数。运算符当调用m2时，对str的引用被复制并传递给将其视为x的函数。运算符+创建一个新字符串，赋值x=x+"4"只是将x重定向到新字符串，而原始str变量保持不变。对吧？谢谢 最佳答案 String#+::str+other_str→new_strConcatenation—ReturnsanewStringcontainingother_strconc
我正在使用PostgreSQL9.1.3(x86_64-pc-linux-gnu上的PostgreSQL9.1.3，由gcc-4.6.real(Ubuntu/Linaro4.6.1-9ubuntu3)4.6.1，64位编译)和在ubuntu11.10上运行3.2.2或3.2.1。现在，我可以使用以下命令连接PostgreSQLsupostgres输入密码我可以看到postgres=#我将以下详细信息放在我的config/database.yml中并执行“railsdb”，它工作正常。开发:adapter:postgresqlencoding:utf8reconnect:falsedat
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan