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代码.

Answer 2

而不是zoom.scale()使用d3.event.scale();

这是我实现的一个示例：http ://jsfiddle.net/thatoneguy/aVhd8/565/1/

这是缩放功能：

function zoomed() {
          container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
          link.style("stroke-width", 8/d3.event.scale);
        }

在你的情况下它将是：

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