I am trying to animmate Polyline using D3.
But it didn't work. Here is what I tried:
function drawPolyline(x1,y1,x2,y2, tooltip)
{
var arr = [];
arr.push(map.unproject([x1 , y1]));
arr.push(map.unproject([x2 , y2]));
var options ={color: 'green', weight: 3,opacity: 0.5, smoothFactor: 1 };
var polyline = new L.Polyline(arr, options);
polyline.addTo(map);
var label = new L.Label({offset: [-20, -20]});
label.setContent(tooltip);
label.setLatLng(polyline.getBounds().getCenter());
map.showLabel(label);
d3.select(polyline).transition()
.duration(350)
.attr({stroke: "rgb(0, 41, 255)" , fill: "rgb(0, 41, 255)"})
}
You're using d3.select on the L.Polyline instance, that won't work. It's not a SVG path element. The actual path element is stored in your L.Polyline instance as member property _path. Try this:
d3.select(polyline._path).transition().duration(350).attr('stroke', 'rgb(0, 41, 255)')
Related
I am trying to style a line drawn over the course of the Danube in Leaflet but have been unable to. The line renders, but the color does not change. This is the code I am working with:
var mymap = L.map('mapid').setView([48, 20], 5);
var danubeData = new L.GeoJSON.AJAX("danuberiver.json");
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox/light-v10',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
var danubeLine = danubeData.setStyle({color: 'black', weight: 3}).addTo(mymap);
It simply renders as the default blue. How can I change this?
If you'd like to set style after load, you need to do it in layeradd event listener, but you can also pass style as an option to L.GeoJSON.AJAX:
var danubeData = new L.GeoJSON.AJAX("danuberiver.json", { style: {color: 'black', weight: 3} });
Here's an example: https://codepen.io/kaveh/pen/GRoagxZ
And here's a similar issue on the plugin Github page: https://github.com/calvinmetcalf/leaflet-ajax/issues/5
I'm trying to show an icon on the center of a circle.
Here is my code :
jsFiddle : http://jsfiddle.net/61dkv8tr/2/
(function(){
var base64img = "data:image/gif;base64,R0lGODlhPQBEAPeoAJ[...]==";
var extent = [0, 0, 400, 400];
var sourceV = new ol.source.Vector({ wrapX: false });
var map = new ol.Map({
renderer: 'canvas',
target: 'divMap',
layers: [
new ol.layer.Vector({
source: sourceV
})
],
restrictedExtent: extent,
view: new ol.View({
center: ol.extent.getCenter(extent),
extent: extent, //world limit drag map
resolution : 1
})
});
var radius = 50;
var x = 200;
var y = 200;
var circleGeom = new ol.geom.Circle([x, y], radius);
var feature = new ol.Feature(circleGeom);
feature.setStyle(new ol.style.Style ({
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
image: new ol.style.Icon({
src: base64img,
color: '#4271AE',
crossOrigin: 'anonymous',
})
}));
sourceV.addFeature(feature);
})();
The render is just the stroke of the circle. Do I miss something ?
The icon is a small red bus.
PS : I also tried with a relative URL, an absolute URL, a canvas...
Thanks !
OK I found the solution. style.Icon only works if its property 'geometry' is of type geom.Point (or if the feature owns a point as geometry type).
To get around with any type of geometry I use the method getExtent() to calculate the center of the geometry and I create a new one of type Point.
$("#NoBidsChart").get(0).toBlob(function(value) {
saveAs(value, "Summary.jpg");
});
Here i am using Chart JS(v2.5.0) for rendering charts. When i try to export the charts using Canvas to Blob converter and filesaver.js, i get the black background. So how do i get the image with customized background color(preferably white)?
If you want a customized background color then, you'd have to draw a background with your preferred color, and you can do so, like this ...
var backgroundColor = 'white';
Chart.plugins.register({
beforeDraw: function(c) {
var ctx = c.chart.ctx;
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
}
});
DEMO
// draw background
var backgroundColor = 'white';
Chart.plugins.register({
beforeDraw: function(c) {
var ctx = c.chart.ctx;
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
}
});
// chart
var canvas = $('#NoBidsChart').get(0);
var myChart = new Chart(canvas, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: 'Line Chart',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(255, 0, 0, 0.2)',
borderColor: 'rgba(255, 0, 0, 0.5)',
pointBackgroundColor: 'black'
}]
}
});
// save as image
$('#save').click(function() {
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<button id="save">Save</button>
<canvas id="NoBidsChart"></canvas>
As I stated in my comment to the accepted answer, it bothered me that the beforeDraw event causes the fillRect code to get called multiple times. (Once per data point as far as I can see.)
But I couldn't get that approach to work when called on any other event. However, I just took the coding approach described in this answer and plugged it into code registered to run on the afterRender event and it does just what I want: run once and leave the background white.
Chart.plugins.register({
afterRender: function(c) {
console.log("afterRender called");
var ctx = c.chart.ctx;
ctx.save();
// This line is apparently essential to getting the
// fill to go behind the drawn graph, not on top of it.
// Technique is taken from:
// https://stackoverflow.com/a/50126796/165164
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
ctx.restore();
}
});
Please visit (and up vote) the linked answer to the other posted question.
In React, with react-chartjs-2, i was able to set background color of chart like so:
const plugin = {
beforeDraw: (chartCtx) => {
const ctx = chartCtx.canvas.getContext('2d');
ctx.save();
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, chartCtx.width, chartCtx.height);
ctx.restore();
}
};
And then add the plugin to the chart:
<Line ref={chartRef} data={chartData} options={options} plugins={[plugin]} />
Reference to the Docs
To save the chart as an image:
I created a function that uses the toBase64Image function to extract the image. I attached this function to a button to help me download chart image on click of button.
function downloadImage(){
const link = document.createElement("a");
link.download = `${chart.name || 'chart'}.jpg`
link.href = chartRef.current.toBase64Image('image/jpeg', 1);
link.click();
}
I'm using DimpleJS to render a BubblePlot. My data looks like this:
[
{type: "A", name:"First", x:1, y:200},
{type: "A", name:"Second", x:30, y:10},
{type: "B", name:"Third", x:50, y:120},
{type: "B", name:"Fifth", x:90, y:100}
]
The graph is created with:
var myChart = new dimple.chart(svg, chartData);
myChart.setBounds(50, 30, 370, 230);
var x = myChart.addMeasureAxis("x", "x");
var y = myChart.addMeasureAxis("y", "y");
var series = myChart.addSeries(["type", "name"], dimple.plot.bubble);
myChart.addLegend(10, 10, 360, 20, "right");
myChart.draw();
This nearly does what I want, with all the data available in the tooltips etc. But coloring is based on both typeand name.
Also unfortunately the legend also picks up all the values from the name field where I'd prefer to just see the type values within the legend.
I also tried to the use the addColorAxismethod like this:
var c = myChart.addColorAxis("type");
var series = myChart.addSeries("name", dimple.plot.bubble);
But that renders black bubbles, shows "NaN" as type in the tooltips and putting that into a legend also doesn't seem to be possible.
Any suggestions are welcome!
Turns out that the order of arguments in the series is important.
This solved my problem:
var myChart = new dimple.chart(svg, chartData);
myChart.setBounds(50, 30, 370, 230);
var x = myChart.addMeasureAxis("x", "x");
var y = myChart.addMeasureAxis("y", "y");
var series = myChart.addSeries(["name","type"], dimple.plot.bubble);
myChart.addLegend(10, 10, 360, 20, "right");
myChart.draw();
When I add an image in canvas and I do a transformMatrix to the image, the roundingBox is shifted.
Look my jsfiddle : http://jsfiddle.net/ULsr4/2/
canvas = this.__canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('http://icons.iconarchive.com/icons/archigraphs/lovely-bones/256/Tree-icon.png', function(img) {
img.transformMatrix = [1, 0, 0.7, 1, 0, 0];
canvas.add(img);
img.setCoords();
});
canvas.renderAll();
can someone help me ?
Don't know if it still needed for you but try to use group object inside you fabric.Image.fromURL callback, ie:
var group = new fabric.Group([img], {
left: 10,
top: 10
});
canvas.add(group);
group.setCoords();