javascript - D3 缩放时保持线宽相同

Question

下面创建两条粗细为 8 的线:

var a = [23,50]
for (b = 0; b < a.length; b++) {
var stripe = vis.selectAll("line.stripep")
.data(connections.filter(function(d,i) { return i == a[b];  }))
.enter().append("svg:line")
  .attr("class", "stripe")
  .attr("stroke", function(d) { return "#000000"; })
  .attr("stroke-linecap", 'round')
  .style("stroke-width",  function(d) { return 8; } )
  .attr("x1", function(d) { return x(d.station1.longitude); })
  .attr("y1", function(d) { return y(d.station1.latitude); })
  .attr("x2", function(d) { return x(d.station2.longitude); })
  .attr("y2", function(d) { return y(d.station2.latitude); })


} 

我有以下缩放功能

function zoomed() {

vis.selectAll("line.route, line.stripe, line.stripep")
.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
vis.selectAll("line.stripep")
.attr("stroke-width", 8 / (zoom.scale()))

但是线宽没有变化，这是什么问题。

我也试过:

vis.selectAll("line.stripep")
.style("stroke-width", 8 / (zoom.scale()))

Answer 1

这段CSS样式完美解决了问题:

.line {
    stroke-width: 2px; // desired stroke width (line height)
    vector-effect: non-scaling-stroke; // line height won't scale
}

无需额外的 JS 代码。