Skip to content

Commit

Permalink
Fill and stroke for geo2svg!
Browse files Browse the repository at this point in the history
  • Loading branch information
mbostock committed Nov 14, 2016
1 parent d0462a3 commit 924187a
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 5 deletions.
28 changes: 27 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -858,7 +858,25 @@ See also [geoproject --precision](#geoproject_precision) and [geo2svg --precisio

<a href="#geo2svg" name="geo2svg">#</a> <b>geo2svg</b> [<i>options…</i>] [<i>file</i>] [<>](https://github.com/d3/d3-geo-projection/blob/master/bin/geo2svg "Source")

Converts the specified GeoJSON *file* to SVG. With [--newline-delimited](#geo2svg_newline_delimited), each input feature is rendered as a separate [path element](https://www.w3.org/TR/SVG/paths.html); otherwise, a single path element is generated. If the associated [GeoJSON feature](http://geojson.org/geojson-spec.html#feature-objects) has an id, the path element will have a corresponding id attribute. The SVG’s fill is set to none and the stroke is set to black.
Converts the specified GeoJSON *file* to SVG. With [--newline-delimited](#geo2svg_newline_delimited), each input feature is rendered as a separate [path element](https://www.w3.org/TR/SVG/paths.html); otherwise, a single path element is generated.

By default, the SVG’s [fill](#geo2svg_fill) is set to none and the [stroke](#geo2svg_stroke) is set to black. To override these values on a per-feature basis, the following [GeoJSON feature](http://geojson.org/geojson-spec.html#feature-objects) properties will be propagated to attributes:

* fill
* fill-rule or fillRule
* fill-opacity or fillOpacity
* stroke
* stroke-width or strokeWidth
* stroke-linecap or strokeLinecap
* stroke-linejoin or strokeLinejoin
* stroke-miterlimit or strokeMiterlimit
* stroke-dasharray or strokeDasharray
* stroke-dashoffset or strokeDashoffset
* stroke-opacity or strokeOpacity

If the feature has an id, the path element will have a corresponding id attribute. If the feature has a *title* property, the path element will have a title element with the corresponding value.

Note: per-feature attributes are most useful in conjunction with [newline-delimited](#geo2svg_newline_delimited) input, as otherwise the generated SVG only has a single path element. To set these properties dynamically, pass the input through [ndjson-map](https://github.com/mbostock/ndjson-map/blob/master/README#map).

<a name="geo2svg_help" href="geo2svg_help">#</a> geo2svg <b>-h</b>
<br><a href="geo2svg_help">#</a> geo2svg <b>--help</b>
Expand Down Expand Up @@ -890,6 +908,14 @@ Specify the output height. Defaults to 500.

Reduce the precision for smaller output files. Defaults to six digits after the decimal point. See also [d3.geoQuantize](#geoQuantize).

<a name="geo2svg_fill" href="geo2svg_fill">#</a> geo2svg <b>--fill</b> <i>value</i>

Specify the default output fill color. Defaults to none.

<a name="geo2svg_stroke" href="geo2svg_stroke">#</a> geo2svg <b>--stroke</b> <i>value</i>

Specify the default output stroke color. Defaults to black.

<a name="geo2svg_newline_delimited" href="geo2svg_newline_delimited">#</a> geo2svg <b>-n</b>
<br><a href="geo2svg_newline_delimited">#</a> geo2svg <b>--newline-delimited</b>

Expand Down
36 changes: 32 additions & 4 deletions bin/geo2svg
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ commander
.option("-h, --height <value>", "output height", 500)
.option("-p, --precision <value>", "number of output digits after the decimal point", 6)
.option("-n, --newline-delimited", "accept newline-delimited JSON")
.option("--fill <value>", "default fill", "none")
.option("--stroke <value>", "default stroke", "black")
.parse(process.argv);

if (commander.args.length === 0) commander.args[0] = "-";
Expand All @@ -41,14 +43,30 @@ writer.write("<?xml version=\"1.0\" encoding=\"utf-8\"?>" + os.EOL
+ " width=\"" + +commander.width + "\""
+ " height=\"" + +commander.height + "\""
+ " viewBox=\"0 0 " + +commander.width + " " + +commander.height + "\""
+ " fill=\"none\" stroke=\"black\""
+ (commander.fill != "black" ? " fill=\"" + attr(commander.fill) + "\"" : "")
+ (commander.stroke != "none" ? " stroke=\"" + attr(commander.stroke) + "\"" : "")
+ ">" + os.EOL);

function transform(d) {
var p = d.properties, v;
return writer.write(" <path"
+ (d.id == null ? "" : " id=\"" + quote(d.id + "") + "\"")
+ ((v = d.id) != null ? " id=\"" + attr(v + "") + "\"" : "")
+ (p ? ((v = p["fill"]) != null ? " fill=\"" + attr(v + "") + "\"" : "")
+ ((v = p["fill-rule"] || p.fillRule) != null ? " fill-rule=\"" + attr(v + "") + "\"" : "")
+ ((v = p["fill-opacity"] || p.fillOpacity) != null ? " fill-opacity=\"" + attr(v + "") + "\"" : "")
+ ((v = p["stroke"]) != null ? " stroke=\"" + attr(v + "") + "\"" : "")
+ ((v = p["stroke-width"] || p.strokeWidth) != null ? " stroke-width=\"" + attr(v + "") + "\"" : "")
+ ((v = p["stroke-linecap"] || p.strokeLinecap) != null ? " stroke-linecap=\"" + attr(v + "") + "\"" : "")
+ ((v = p["stroke-linejoin"] || p.strokeLinejoin) != null ? " stroke-linejoin=\"" + attr(v + "") + "\"" : "")
+ ((v = p["stroke-miterlimit"] || p.strokeMiterlimit) != null ? " stroke-miterlimit=\"" + attr(v + "") + "\"" : "")
+ ((v = p["stroke-dasharray"] || p.strokeDasharray) != null ? " stroke-dasharray=\"" + attr(v + "") + "\"" : "")
+ ((v = p["stroke-dashoffset"] || p.strokeDashoffset) != null ? " stroke-dashoffset=\"" + attr(v + "") + "\"" : "")
+ ((v = p["stroke-opacity"] || p.strokeOpacity) != null ? " stroke-opacity=\"" + attr(v + "") + "\"" : "")
: "")
+ (string = "", render(d), string ? " d=\"" + string + "\"" : "")
+ "></path>" + os.EOL);
+ ">"
+ ((v = p && p["title"]) != null ? "<title>" + text(v + "") + "</title>" : "")
+ "</path>" + os.EOL);
}

function end() {
Expand All @@ -59,6 +77,16 @@ function abort(error) {
console.error(error.stack);
}

function quote(string) {
function text(string) {
return string.replace(/[&<>]/g, function(character) {
switch (character) {
case "&": return "&amp;";
case "<": return "&lt;";
case ">": return "&gt;";
}
});
}

function attr(string) {
return string.replace(/"/g, "&quot;");
}

0 comments on commit 924187a

Please sign in to comment.