Question

我在D3.js中有一个小圈子。

现在，我可以创建一个按钮，可以通过单击按钮来增加圆的大小。问题是，我只能改变我写的一个定义的大小。

    window.Parsley.addValidator('messageWithoutLink', {
        validateNumber: function(value, requirement) {
            console.log(value);
            if(value.indexOf("http") !== -1)
                return value;
            else 
                return false;
        },
        requirementType: 'string',
        messages: {
            en: 'No links allowed'
        }
    });

<textarea id="contact_message" name="message" required data-parsley-required-message="Obligatory message" data-parsley-message-without-link></textarea>

但我的想法是每次点击按钮时都会以小步长增加圆圈的大小。我正在考虑使用for循环，但我不确定在D3.js中使用循环是否是一个好主意。

Answer 1

无论您使用D3还是其他任何东西，for循环都不是正确的解决方案。可能最简单的方法可能是在单击按钮时读取实际值，根据需要增加它并相应地设置新值：

d3.select("button").on("click", function() { 
  circle.attr("r", +circle.attr("r") + 6);                  // unbounded
  //circle.attr("r", Math.min(+circle.attr("r") + 6, 20));  // capped to 20
});

嵌套circle.attr("r")返回实际为圆圈设置的值（注意，这将产生一个字符串，因此前面的+运算符将其转换为数字）。将6添加到此值后，新的较大值将由外部circle.attr()设置。

看看这个工作示例：

var circle = d3.select("svg")
  .append("circle")
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 6);

d3.select("button").on("click", function() { 
  circle.attr("r", +circle.attr("r") + 6);                  // unbounded
//  circle.attr("r", Math.min(+circle.attr("r") + 6, 20));  // capped to 20
});

<script src="https://d3js.org/d3.v4.js"></script>
<svg></svg>
<button>Expand circle</button>

单击按钮逐步增加元素的大小

1 个答案: