在D3 Map中调整多边形边框

Question

我有一张海地地图，其中包含使用D3 JavaScript库创建的每个社区的行政边界。

请查看美国东南部的海地地图。如果我放大地图，公社的边框似乎是准确绘制的。但是，这些线条非常值得思考。如何修改边框，创建细线或理想的虚线？

请参阅下面的我的JavaScript代码（ http://jsfiddle.net/mattbowlby/a0od8d50/）：

     ///////////////////////////////////////////////////////////////////////////////////
      //                                                                               //
      //     Zoom Listener, Zoom Listener Function and Zoom Reset                      //
      //                                                                               //
      ///////////////////////////////////////////////////////////////////////////////////

      // Define Zoom Function Event Listener
      function zoomFunction() {
        d3.selectAll("path")
          .attr("transform",
              "translate(" + d3.event.translate
              + ") scale (" + d3.event.scale + ")");
      }

      // Define Zoom Behavior
      var zoom = d3.behavior.zoom()
          .scaleExtent([.2, 200])
          .on("zoom", zoomFunction);

      // Define Zoom Reset
      function zoomReset() {
        zoom.scale(1);
        zoom.translate([0,0]);
      }



      ///////////////////////////////////////////////////////////////////////////////////
      //                                                                               //
      //     Visualization Creation                                                    //
      //                                                                               //
      ///////////////////////////////////////////////////////////////////////////////////

      // Variables
      var width = 930,
          height = 400,
          geoPath = d3.geo.path();

      // Redefine the geoPath projection as mercator
      geoPath.projection(d3.geo.mercator)


      // SVG Viewport
      var svgContainer = d3.select("#viz").append("svg")
          .attr("width", width)
          .attr("height", height)
          .style("border", "2px solid red")
          .call(zoom);

      // Function to Draw Originally and then ReDraw the chart
      function draw(projection) {

        /*
         * Reset the Drawing by deleting old paths and reseting zoom level
         */

        // Delete prior paths
        d3.select("svg").selectAll("path").remove();

        //  Reset Zoom
        zoomReset();

        /*
         * redefine geoPath and Do 2 separate AJAX calls for USA and Haiti Paths
         */

        // Define geoPath Variable;
        var geoPath = d3.geo.path().projection(projection);


        // USA AJAX Call
        d3.json("https://rawgit.com/mattbowlby/b4a95151d65cc1326e6f/raw/8f487e1d18e5fc7b2fcc9fa0dfcab3fb03aeca13/usa.geo.json", function(error, data) {

          // Define Data
          var usaFeatureCollection = data;

          // Create USA Map SVG Path
          var usaSVG = svgContainer
            .append("path")
              .attr("d", geoPath(usaFeatureCollection))
              .style("fill", "navy");

        });


        // Haiti AJAX Call
        d3.json("https://rawgit.com/mattbowlby/b4a95151d65cc1326e6f/raw/0497f54fdd7fe9e2dc5a3e5da4d86f89d1a764a4/haiti3.geo.json", function(error, data) {

          // Define Data
          var haitiFeatureCollection = data;

          // Create Haiti Map SVG Path
          var haitiSVG = svgContainer
            .append("path")
              .attr("d", geoPath(haitiFeatureCollection))
              .style("fill", "blue")
              .style("stroke", "black");

        });


      }

      // Original Drawing
      draw(d3.geo.albers());

      // Tool tips
      var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
        return "<strong>Commune:</strong> <span style='color:red'>" + d.id_com + "</span>";
  })