The following creates two lines with thickness 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); })
}
I have the following function for zooming
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()))
}
However the line thickness does not change, what is the problem.
I also tried:
vis.selectAll("line.stripep")
.style("stroke-width", 8 / (zoom.scale()))
However, using D3 zoom, the zoom transform object we will initialize will keep track of our gestures: how far we “scrolled” to the right, left, and along the z-axis virtually piercing through the screen following our line of sight. Based on the transform, we can re-position our elements.
We start by zooming in to a scale factor of 20 without panning: var initialTransform = d3.zoomIdentity.scale (20); listenerRect.call (zoom.transform, initialTransform); d3.zoomIdentity returns the identity transform we have already encountered a few times. We change the transform scale to 20 and cache it in initialTransform.
The best opening paragraph for a D3 zoom article has already been written, and it goes like this: It’s good. In four sentences, it tells you precisely what zooming is and what it does, and — probably more importantly — it takes away your zooming fears. So, has it all been said then? Well, it never has.
The changes are consistent and sensible, but are worth a few extra notes that might help you find sleep: As with v3, zoom in v4 is just about the x and y translation and the scale — the transform parameters. That is, of course, brutally simplifying complexity, but it’s a mantra you should try out when gridlocked.
This piece of CSS styling perfectly solves the issue:
.line {
stroke-width: 2px; // desired stroke width (line height)
vector-effect: non-scaling-stroke; // line height won't scale
}
No need for additional JS code.
Instead of zoom.scale()
use d3.event.scale();
Here is an example I have implemented : http://jsfiddle.net/thatoneguy/aVhd8/565/1/
Here is the zoom function :
function zoomed() {
container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
link.style("stroke-width", 8/d3.event.scale);
}
In your case it will be :
vis.selectAll("line.stripep").style("stroke-width", 8/d3.event.scale);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With