D3 MultiLineString Example

This is an example of using D3's geo paths to render a MultiLineString, but it seems to not render correctly for whatever reason. It is not a fill/stroke problem, either.

Identified problem: It seems that the stroke width gets scaled as well.

<!DOCTYPE html>

<style>

</style>
</head>

d3.json('data.topojson', function(error, route) {
      var width = 960;
      var height = 500;

var svg = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height);

route = topojson.feature(route, route.objects['metrotransit-green-line.geo']);

// Make projection and path handler
      var projectionData = route;
      var centroid = d3.geo.centroid(projectionData);
      var projection = d3.geo.albersUsa()
        .scale(1000)
        .translate([width / 2, height / 2]);
      var projectionPath = d3.geo.path().projection(projection);

// Make group for features
      var featureGroup = svg.append('g').attr('class', 'feature-group');

// Fit map to data
      var b = projectionPath.bounds(projectionData);
      featureGroup.attr('transform',
        'translate(' + projection.translate() + ') ' +
        'scale(' + 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height) + ') ' +
        'translate(' + -(b[1][0] + b[0][0]) / 2 + ',' + -(b[1][1] + b[0][1]) / 2 + ')');

// Add data
      featureGroup.selectAll('.route')
        .data(route.features)
        .enter()
          .append('path')
          .attr('class', 'route')
          .attr('d', projectionPath)
          .style('fill', 'blue')
          .style('fill-opacity', 0.05)
          .style('stroke', 'red')
          .style('stroke-opacity', 0.75)
          .style('stroke-width', 0.001);

});

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js