diff --git a/example/legend-image.md b/example/legend-image.md new file mode 100644 index 0000000..1060a3a --- /dev/null +++ b/example/legend-image.md @@ -0,0 +1,24 @@ +[width]: 400 +[height]: 200 + +# Images in Legends + +Each pair of square and text in a Legend is just an extension of the [Shape](http://d3plus.org/docs/#Shape) class. In order to override how they are rendered, pass a valid [config](http://d3plus.org/docs/#BaseClass.config) object to [.shapeConfig( )](http://d3plus.org/docs/#Shape.shapeConfig). In this example, we are providing an accessor function to the [backgroundImage](http://d3plus.org/docs/#Shape.backgroundImage) method of [Shape](http://d3plus.org/docs/#Shape), which returns an image path from each data point. + +```js +var data = [ + {id: "Apple", color: "orange", image: "https://datausa.io/static/img/attrs/thing_apple.png"}, + {id: "Fish", color: "blue", image: "https://datausa.io/static/img/attrs/thing_fish.png"}, + {id: "Tomato", color: "red", image: "https://datausa.io/static/img/attrs/thing_tomato.png"} +]; + +var legend = new d3plus.Legend() + .data(data) + .shapeConfig({ + backgroundImage: function(d) { return d.image; }, + fill: function(d) { return d.color; }, + height: 25, + width: 25 + }) + .render(); +``` diff --git a/example/legend-image.png b/example/legend-image.png new file mode 100644 index 0000000..1a19af4 Binary files /dev/null and b/example/legend-image.png differ diff --git a/example/legend-remove-label.md b/example/legend-remove-label.md new file mode 100644 index 0000000..7d6a1cd --- /dev/null +++ b/example/legend-remove-label.md @@ -0,0 +1,25 @@ +[width]: 400 +[height]: 200 + +# Removing Legend Labels + +The text labels in a legend can be removed/disabled by setting the [.label( )](http://d3plus.org/docs/#Legend.label) method to `false`. This is common practice when using images, as in the [Images in Legends](http://d3plus.org/examples/d3plus-legend/legend-image/) example (which this code is based on). + +```js +var data = [ + {id: "Apple", color: "orange", image: "https://datausa.io/static/img/attrs/thing_apple.png"}, + {id: "Fish", color: "blue", image: "https://datausa.io/static/img/attrs/thing_fish.png"}, + {id: "Tomato", color: "red", image: "https://datausa.io/static/img/attrs/thing_tomato.png"} +]; + +var legend = new d3plus.Legend() + .data(data) + .label(false) + .shapeConfig({ + backgroundImage: function(d) { return d.image; }, + fill: function(d) { return d.color; }, + height: 25, + width: 25 + }) + .render(); +``` diff --git a/example/legend-remove-label.png b/example/legend-remove-label.png new file mode 100644 index 0000000..03f815e Binary files /dev/null and b/example/legend-remove-label.png differ