小编met*_*ion的帖子

我的模板看起来像这样:

.dropdown.light
      .login
        =form_for("user", :url => user_session_path) do |f|
          = f.hidden_field :redirect_to, :value => request.fullpath
          = f.email_field :email, :placeholder => "email", :size => ''
          = f.password_field :password, :placeholder => "password", :size => ''
          div.remember
            = f.check_box :remember_me, :checked => "checked"
            = f.label :remember_me
          .clearfix
            a.forgot.pull-left href="#forgot" Forgot your password?
            input.pull-right type="submit" value="Sign in"
      .forgotten
        =form_for(:user,:as => :user_forgot, :url => password_path(:user), :html => { :method => :post }) do |f|
          p
            strong Reset your password
          p.small Give us your e-mail and …

这可能更像是几何相关的问题,但我试图将控制器限制在一个圆的区域内.我知道我必须触及Math.sin()和Math.cos()方法,但到目前为止我的尝试都没有结果.

这是jsfiddle:到目前为止,我已经能够将它约束到一个看不见的方块.http://jsfiddle.net/maGVK/

我经常发现自己正在做这些似乎缺乏优雅的三元结构:

pixels = ( pixels > (canvas.top + canvas.left) ) ? canvas.top + canvas.left : pixels;

是否有更简洁的方式陈述 pixels = whatever is smaller

如何选择"任何没有包含标签的东西"来在jQuery中添加包装器？例如:

<div class="post">
    <div class="whatever">This should remain untouched</div>
    I want to wrap this in div.red
</div>

结果就是这样

<div class="post">
    <div class="whatever">This should remain untouched</div>
    <div class="red">I want to wrap this in div.red</div>
</div>

我在Chrome 16和Safari 5桌面上遇到此图形时出现问题:

http://jsfiddle.net/D7ERH/embedded/result/

要在窗口最大化的情况下重现问题视图,请降低窗口高度并重新加载.

如果全屏显示帧率会受到极大影响,但如果你降低窗口高度,那么webkit似乎对图形感到满意.Opera和Firefox在这两种尺寸上都没有问题.

图形是用d3.js创建的,但我认为它会发生在相同的SVG图像上,因为它只是生成元素的代码.光标移动是纯粹的js.

作为一个旁注,我发现如果我使用translate3d(x, y, 0)而不是顶部和左部,鼠标移动是平滑的,但我更喜欢使用它作为最后的手段.translate(x, y)也很慢.

我有这个代码:

  var stage = d3.select("body").append("svg");
  var points = [0, 50, 100, 150];
  var letters = "drag".split(",");
  var log = d3.select("#log");

  //drag behaviour, will bind later
    var drag = d3.behavior.drag()
      .origin(Object)
      .on("drag", dragmove);


  //append texts
    var texts = stage
        .selectAll("text")
        .data(letters)
        .enter()
            .append("text")
            .attr("font-family", "Arial")
            .attr("class", "word")
            .attr("x", function(d,i){return points[i]})
            .attr("y", 100)
            .text(function(d){return d})
            .call(drag);

    function dragmove() {
        log.text(
            "x: " + d3.event.x + ", " +
            "y: " + d3.event.y + ", " +
            "dx: " + d3.event.dx + ", …

我经常想使用forEach或map遍历NodeList。我的简化代码如下所示：

var nodeListMap = Array.prototype.map;
var els = document.querySelectorAll('.classname');
nodeListMap.call(els, function(el){...});

这很好。但是，我不想不必这样做map.call，但是如果我这样做的话...

var nodeListMap = Array.prototype.map.call;
var els = document.querySelectorAll('.classname');
nodeListMap(els, function(el){...});

然后返回

TypeError: object is not a function

我怎样才能修改代码，让我简单地做nodeListMap(array, fn)呢？

我使用过D3的早期版本，而在v4上又回来了，但是我不太了解新的更新模式。我已经嵌套了数据，并且希望使用新的子节点更新可视化，这是一个最小的示例：

function update(data) {
  var rows = d3
    .selectAll("div")
      .data(data)
      .enter()
      .append("div")
      .classed("row", true)

   var cells = rows
      .selectAll("div")
      .data(function(d) { return d })

  cells
      .enter()
      .append("div")
      .classed("cell", true)
      .text(function(d) {return d})
 }

var arr = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 2, 3]
]

var button = d3.select("body")
  .append("button")
  .text("update")
  .on("click", modifyData);

function modifyData(){
  arr.forEach(row => {
    row.push(4)
  });
  update(arr);
}

update(arr);

https://jsfiddle.net/59qnhb8d/

我希望我的视角以4的列进行更新。任何提示表示赞赏。