Question

我正在使用d3.js see fiddle及相关代码制作水滴效果：

.append("line")

.attr("x1", function(d){
    return xScale(d)})

.attr("y1", 0)
.attr("x2", function(d){
    return xScale(d)})
.transition().delay(function (d,i){ return i * 500;})
 .duration(10000) 
     .attr("y2", function(d,i){
return yScale(i) ;
})

line.style("stroke", function() {
    var colors = ["rgba(242,100,5,0.7)","rgba(32,144,209,0.7)","rgba(203,214,86,0.7)"];
    var colorscale = Math.floor(Math.random() * colors.length);
    var randomcolors = colors[colorscale];
    return randomcolors;
});
line.style("stroke-width", function(d){
return strokeWidth[d] + "px" });
line.style("stroke-opacity", 1);
line.style("stroke-linecap", "round");

它的工作方式，但我无法弄清楚如何仅将转换应用于行长度。目前，过渡应用于线宽和线长。感谢您的帮助

Answer 1

通过在保存变量时应用转换，对set属性的所有后续调用都适用于转换的结束。要防止这种情况，请在添加行后添加分号，并将所有内容应用于已保存的变量。

见the updated jsfiddle。唯一的变化基本上是

...
    .append("line");

line.attr("x1", ...)

尝试将d3.js过渡到行长度，而不是重量

1 个答案: