将 D3 线条样式改回常规

Question

这个问题可能很简单，但出于某种原因我无法弄清楚，也无法在网上找到任何相关信息。

我像这样创建以下虚线：

   linkContainer.enter()
        .append("line")
        .style("stroke-dasharray", ("3, 3"))
        .attr("class", "link")
        .on("click", clickLine);

我想做的是，当单击该行时，我想将其改回实线，即不再有破折号。

function clickLine() {
    d3.select(this).transition()
     .duration(750)
     .style("stroke", "lightsteelblue");
}

是否有任何样式功能可以将线条从虚线转换为连续线？再次感谢。

Answer 1

对于转换，我会修改 stroke-dasharray 值以不再包含间隙——第一个数字是破折号的（相对）长度，第二个数字是间隙。所以你需要做的就是将第二个数字设置为 0:

d3.select(this).transition()
  .style("stroke-dasharray", "3,0");

完成演示 here。

将 D3 线条样式改回常规

Change D3 line style back to regular

javascript

css

d3.js