I'm trying to create a brush in the React app. So I imported brushX function from the d3-brush module and do the following:
import {brushX} from 'd3-brush';
let brush = brushX()
.x(this.x)
.extent([initWindow.start, initWindow.end])
.on("brush", this.display);
I got the error - .x() is not a function.
So how I can set scale to the brash?
Following part of the code works fine in non React app (d3js was downloaded from the mdn):
var brush = d3.svg.brush()
.x(x)
.extent([initWindow.start, initWindow.end])
.on("brush", display);
Related
I am using Techanjs to create updating candlestick chart, the example I am referring is => http://bl.ocks.org/andredumas/95f1f22130fb1a3a8181
This example doesn't support zoom so from another example => http://bl.ocks.org/andredumas/a48008ea8e2c832144db I copied the code for zoom. My chart is zooming now but now the issue I am facing is the zoom got reset to the original zoom level when the new candle gets added in the chart. current code
function zoomed() {
var rescaledY = d3.event.transform.rescaleY(y);
yAxis.scale(rescaledY);
candlestick.yScale(rescaledY);
Code I tried:
function zoomed() {
let t = d3.zoomTransform( svg.node());
var rescaledY = t.rescaleY(y);
yAxis.scale(rescaledY);
candlestick.yScale(rescaledY);
below line is present where I am reading the json
zoomableInit = x.zoomable().clamp(false).copy();
To freeze the zoom I tried to modify the rescaleY and rescaleX functions but didn't really understand the required changes. Please suggest.
I'm working with D3.js library. I wan't to make zoom in SVG file.
When I'm zooming in or out. Has a lot of errors emit into console like this:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312
This is my code.
<object id="map" type="image/svg+xml" data="seatMap.svg"></object>
<script type="text/javascript">
'use strict';
var obj = document.getElementById('map');
var svgDoc = obj.getSVGDocument();
var svg = d3.select(svgDoc).select('svg');
var g = d3.select(svgDoc).select('#seat-map');
svg.call(d3.zoom()
.scaleExtent([1, 8])
.on('zoom', zoomed));
function zoomed() {
g.attr('transform', d3.event.transform);
}
</script>
I already research and try many times but still get are errors.
Anyone know how to resolve? Thank you.
I am using ESRI basemaps with Mapbox-GL-JS. I am trying to capture a screenshot of the map using the following code:
this.map.getCanvas().toBlob(function (blob) {
canvasContext.strokeStyle = '#CCCCCC';
canvasContext.strokeRect(leftPosition, topPosition, width, height);
var img = new Image();
img.setAttribute("crossOrigin", "anonymous");
var srcURL = URL.createObjectURL(blob);
img.onload = function () {
canvasContext.drawImage(img, leftPosition, topPosition, width, height);
URL.revokeObjectURL(srcURL);
};
img.src = srcURL;
});
I am not able to figure out why the attribution on the Map is not getting captured in the screenshot. I understand that here I am just trying to get the canvas of the map. I even tried adding text elements to the map canvas and that doesn't work either. I have markers & routes, which get in the image correctly. I also tried using the Mapbox basemap and try the same, but faced the same issue.
Any help is highly appreciated!
map.getCanvas() will only return the Map's canvas not any of the HTML Elements which sit over the map like the controls, Mapbox logo or attribution text. Sam Murphy has been working on an example showing how to capture the Map including the Logo and Attribution text to an image which you can see at https://github.com/mapbox/mapbox-gl-js/pull/6518/files.
Since we can't easily capture an HTML Element to an image in JavaScript the attribution text is re-created in a canvas drawn into the Image.
Problem Solved == use d3.drag() instead of d3.behaviour.drag() and use d3-drag.v1.min.js
I have set up a SVG chess board with D3js using for loop to go through each row and each column. I used unicode for chess pieces so each chess pieces is a svg element.
I am trying to drag chess pieces with drag behaviour of D3js but not possible.
All chess pieces have class "draggable". So I created the drag and attached it to all elements with class "draggable"
var drag = d3.behavior.drag()
.origin(function() {
var t = d3.select(this);
return {x: t.attr("x"), y: t.attr("y")};
})
.on("dragstart", function() {
d3.event.sourceEvent.stopPropagation(); // silence other listeners
})
.on("drag", function(d,i) {
d3.select(this)
.attr("x", d3.event.x)
.attr("y", d3.event.y);
});
d3.selectAll(".draggable").call(drag);
My full code is here http://codepen.io/linhnt1516/pen/ZeGoNj?editors=0011
Also, I have tried to use the same drag function with and svg elements in other examples. Check out this code pen http://codepen.io/linhnt1516/pen/VpvobE?editors=0011 and drag the text and the box.
I have been looking through tons of drag examples of D3js but none of them works with the chess piece case.
Anyone has any solution or idea where things may go wrong here.
I haven't fully understand the differences between D3 v4 and D3 v3 drag behaviour or what is the actual problem with behaviour.drag()
Before I used D3 v3 and set up
var drag = d3.behaviour.drag()
This doesn't work as described in the question.
However I found a support d3 script which is d3-drag.v1.min.js
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
So when I added this one and set up
var drag = d3.drag()
The detailed code of drag is the same as above, just different initialization syntax. The drag functionality now works correctly. If anyone knows why .behaviour.drag() doesn't work and what is the actual differences between my old code and the new working one, please enlighten me.
I've created an NVD3 multiBarChart and placed it in a jQuery resizable container. When resizing the chart, each render incurs the same delay as when the chart is first drawn: staggered left-to-right delayed drawing of the bars. This looks cool when the chart is first drawn, but it's a nuisance when resizing the chart. I've experimented with nv.d3.css, reducing every delay to 0ms to no avail. Haven't yet inspected the NVD3 JS and am hoping not to need to.
Fiddle:
http://jsfiddle.net/a5Fnj/10/
var container = $("#mycontainer");
$(container[0]).resizable();
var svg = d3.select(container[0]).append("svg");
nv.addGraph(function () {
var chart = nv.models.multiBarChart();
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.1f'));
d3.select(container[0]).select("svg")
.datum(exampleData())
.transition().duration(0).call(chart);
nv.utils.windowResize(chart.update);
this.stackedbar = chart;
});
function exampleData() {
return stream_layers(3, 10 + Math.random() * 100, .1).map(function (data, i) {
return {
key: 'Stream' + i,
values: data
};
});
}
As of NVD3 1.7.1 you can use the duration option:
chart.duration(0);
I used transitionDuration: -1 that worked for a stackedAreaChart.
Edit
This helped remove the transition when appending chart data, not the re-size issue, please check the comments below.
In the latest version (from github), you can set .transitionDuration():
chart.transitionDuration(0);
Edit: Even with this, some of the transitions/durations are hardcoded in the NVD3 source. The only way to get rid of those is to modify the source.