D3 is used to generate a svg in an angular2 component. How to update properties x and y in component from svg event mousemove?
export class AxisComponent implements OnInit {
x:number;
y:number;
ngOnInit() {
var svgWidth=400;
var svgHeight=400;
var margin = {top:25, right:25, bottom:50, left:50};
var width = svgWidth - margin.left - margin.right;
var height = svgHeight - margin.top - margin.bottom;
var svg = d3.select('#container').append('svg')
.attr('width', svgWidth)
.attr('height',svgHeight)
.style('border', '2px solid');
svg.on("mousemove", function(){
var xy = d3.mouse(this);
this.x = xy[0];
this.y = xy[0];
});
}
Error when accessing from mousemove event:
I suspect it should be:
svg.on("mousemove", () => {
var xy = d3.mouse(svg); // or d3.mouse(d3.event.currentTarget);
this.x = xy[0];
this.y = xy[0];
Or this way:
let self = this;
svg.on("mousemove", function(){
var xy = d3.mouse(this);
self.x = xy[0];
self.y = xy[0];
});
Related
Below example will draw a rectangle, I would like to rotate the rectangle around top left corner (0,500) with anti-clockwise 15 degree and keep to coordinate system not rotate.
test()
function test() {
var margin = {left:10,top:10,right:10,bottom:10}
var width = 300
var height = 300
var svg = d3.select('body').append('svg')
svg.attr('width',width + margin.left + margin.right)
.attr('height',height + margin.top + margin.bottom)
.style('border','2px solid red')
var g = svg.append('g')
.attr('transform',`translate(${margin.left},${margin.top})`)
var xmin = 0
var xmax = 800
var xScale = d3.scaleLinear().range([0, width]);
xScale.domain([xmin,xmax]);
var ymin = 0
var ymax = 800
var yScale = d3.scaleLinear().range([height, 0]);
yScale.domain([ymin,ymax])
var fw = 200
var fh = 500
var data = [[0,0],[0,fh],[fw,fh],[fw,0]]
draw_box(g,'rect',data,xScale,yScale)
function draw_box(g,clzname,arr,xScale,yScale,col='#ffffff') {
var drawrect = function(d) {
var arr = []
arr.push('M')
for (var i=0;i<d.length;i++) {
e = d[i]
arr.push(xScale(e[0]))
arr.push(yScale(e[1]))
if (i == 0) {
arr.push('L')
}
}
arr.push('z')
var path = arr.join(' ')
return path
}
g.selectAll(clzname)
.data([arr])
.join('path')
.attr('class',clzname)
.attr('d',drawrect)
.attr('stroke','black')
.attr('fill',col)
}
}
<script src="https://d3js.org/d3.v6.min.js"></script>
This demo try to update data when click the graph. it use the join method but looks like data and axis have been overlapped after click. the previous drawing not been cleared!
console.clear()
click_to_update()
function click_to_update() {
var svg = d3.select('body').append('svg')
.attr('width',600)
.attr('height',400)
.style('border','5px solid red')
var frame = svg.append('g').attr('class','frame')
frame.append('g').attr('class','xaxis')
frame.append('g').attr('class','yaxis')
d3.select('svg').on('click', function(){
var data = fetch_data()
refresh_graph(data)
})
var data = fetch_data()
refresh_graph(data)
function refresh_graph(data){
var svg = d3.select('svg')
var colors = d3.scaleOrdinal(d3.schemeSet3)
var margin = {left: 40,top: 10, right:10,bottom: 60},
width = +svg.attr('width') - margin.left - margin.right,
height = +svg.attr('height') - margin.top - margin.bottom;
var g = d3.select('.frame')
.attr('transform',`translate(${margin.left},${margin.top})`)
var xrange = data.map(function(d,i) { return i; })
var x = d3.scalePoint()
.domain(xrange)
.range([0, width]);
var ymax = d3.max(data,d => d.value)
var y = d3.scaleLinear()
.domain([0,ymax])
.range([height, 0]);
var drawpath = function(d,i) {
var ax = x(i)
var ay = y(d.value)
var bx = x(i)
var by = y(0)
var path = ['M',ax,ay,'L',bx,by]
return path.join(' ')
}
var g1 = g.selectAll('path')
.data(data)
.join('path')
.attr('stroke','gray')
.attr('stroke-width',1)
.style('fill', (d, i) => colors(i))
.transition()
.attr('d', drawpath)
g.selectAll('circle')
.data(data)
.join('circle')
.attr('fill','red')
.attr('cx',(d,i) => x(i))
.attr('cy',(d,i) => y(d.value))
.attr('r',5)
var xaxis = d3.select('.xaxis')
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
var yaxis = d3.select('.yaxis')
.attr('transform','translate(-5,0)')
.call(d3.axisLeft(y));
}
function fetch_data(){
var num = parseInt(Math.random()*20) + 5
var data = d3.range(num).map(d => {
return {value:Math.random()}
})
return data
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
I want to create Scatter plot having tool-tip for every point , i am new to d3 i used the example
from this link
https://github.com/xoor-io/d3-canvas-example/blob/master/02_scatterplot_with_zoom/plot.js
Some how i managed to create the scatter plot but unable to add tool-tip to the existing code
let dataExample = [];
for (let i= 0; i < 10000; i++) {
const x = Math.floor(Math.random() * 999999) + 1;
const y = Math.floor(Math.random() * 999999) + 1;
dataExample.push([x, y]);
}
const pointColor = '#3585ff'
const margin = {top: 20, right: 15, bottom: 60, left: 70};
const outerWidth = 800;
const outerHeight = 600;
const width = outerWidth - margin.left - margin.right;
const height = outerHeight - margin.top - margin.bottom;
const container = d3.select('.scatter-container');
// Init SVG
const svgChart = container.append('svg:svg')
.attr('width', outerWidth)
.attr('height', outerHeight)
.attr('class', 'svg-plot')
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// Init Canvas
const canvasChart = container.append('canvas')
.attr('width', width)
.attr('height', height)
.style('margin-left', margin.left + 'px')
.style('margin-top', margin.top + 'px')
.attr('class', 'canvas-plot');
// Prepare buttons
const toolsList = container.select('.tools')
.style('margin-top', margin.top + 'px')
.style('visibility', 'visible');
toolsList.select('#reset').on('click', () => {
const t = d3.zoomIdentity.translate(0, 0).scale(1);
canvasChart.transition()
.duration(200)
.ease(d3.easeLinear)
.call(zoom_function.transform, t)
});
const context = canvasChart.node().getContext('2d');
// Init Scales
const x = d3.scaleLinear().domain([0, d3.max(dataExample, (d) => d[0])]).range([0, width]).nice();
const y = d3.scaleLinear().domain([0, d3.max(dataExample, (d) => d[1])]).range([height, 0]).nice();
// Init Axis
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);
// Add Axis
const gxAxis = svgChart.append('g')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
const gyAxis = svgChart.append('g')
.call(yAxis);
// Add labels
svgChart.append('text')
.attr('x', `-${height/2}`)
.attr('dy', '-3.5em')
.attr('transform', 'rotate(-90)')
.text('Axis Y');
svgChart.append('text')
.attr('x', `${width/2}`)
.attr('y', `${height + 40}`)
.text('Axis X');
// Draw plot on canvas
function draw(transform) {
const scaleX = transform.rescaleX(x);
const scaleY = transform.rescaleY(y);
gxAxis.call(xAxis.scale(scaleX));
gyAxis.call(yAxis.scale(scaleY));
context.clearRect(0, 0, width, height);
dataExample.forEach( point => {
drawPoint(scaleX, scaleY, point, transform.k);
});
}
// Initial draw made with no zoom
draw(d3.zoomIdentity)
function drawPoint(scaleX, scaleY, point, k) {
context.beginPath();
context.fillStyle = pointColor;
const px = scaleX(point[0]);
const py = scaleY(point[1]);
context.arc(px, py, 1.2 * k, 0, 2 * Math.PI, true);
context.fill();
}
// Zoom/Drag handler
const zoom_function = d3.zoom().scaleExtent([1, 1000])
.on('zoom', () => {
const transform = d3.event.transform;
context.save();
draw(transform);
context.restore();
});
canvasChart.call(zoom_function);
.scatter-container {
margin: auto;
width: 800px;
height: 600px;
}
.svg-plot, .canvas-plot {
position: absolute;
}
.tools {
position: absolute;
left: calc(50% + 400px);
visibility: hidden;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<div class="scatter-container">
<div class="tools">
<button id="reset">Reset</button>
</div>
</div>
Any idea how i can add tool-tip to canvass so it could be display x and y point while I hover for specific point.
I cannot work out how to drag a path around the svg object using d3.js
Specifically, I have a normal distribution shape rendered as a path to the svg and I want to be able to click on it and drag it around the svg space (but there is nothing unique about this particular shape etc) .
I have seen examples for points, straight lines and shapes but not a path.
My simplified code is below. Unless I am way off the mark, I suspect the error is with the dragged function right at the bottom.
Javascript:
// width and height for svg object
var w = 500;
var h = 500;
/// setting up svg object
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
// Values for calculating pdf of normal distribution
var sigma = 4;
var mu = 0;
var N = 10;
var step = 0.1;
var dataset = [];
var x;
// creating the pdf of the normal distribution and plotting it for -N to N
var C = 1/(sigma*Math.sqrt(2*Math.PI));
for (x=-N; x < N; x += step) {
var E = (x-mu)/sigma;
E = -(E*E)/2;
var d = C*Math.exp(E);
dataset.push(d);
}
// Scales slightly over fancy, required for features stripped out
var overlap = w*0.1;
var xscale1 = d3.scale.linear().range([0, w/2+overlap]).domain([0, dataset.length-1]).clamp(true);
var xscale2 = d3.scale.linear().range([w/2-overlap, w]).domain([0, dataset.length-1]).clamp(true);
// So specifies the height as max in dataset and it takes up 1/2 the svg
var yscale = d3.scale.linear().domain([0, d3.max(dataset)]).range([h,h/2]);
var area1 = d3.svg.area()
.x(function(d,i) { return xscale1(i); })
.y0(h)
.y1(function(d,i) { return yscale(d); });
// plots filled normal distribution to svg
g1 = svg.append("path")
.datum(dataset)
.attr("class", "area1")
.attr("d", area1)
.attr("opacity",0.75);
// Problem is probably with the below line and related function dragged
d3.select("path.area1").on("drag", dragged);
function dragged() {
var dx = d3.event.dx,
dy = d3.event.dy;
d3.select(this)
.attr("transform", path => "translate(" + dx + "," + dy + ")");
}
Here is a version of your code which implements the drag:
var w = 500;
var h = 250;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// Values for calculating pdf of normal distribution
var sigma = 4;
var mu = 0;
var N = 10;
var step = 0.1;
var dataset = [];
var x;
// creating the pdf of the normal distribution and plotting it for -N to N
var C = 1/(sigma*Math.sqrt(2*Math.PI));
for (x=-N; x < N; x += step) {
var E = (x-mu)/sigma;
E = -(E*E)/2;
var d = C*Math.exp(E);
dataset.push(d);
}
// Scales slightly over fancy, required for features stripped out
var overlap = w*0.1;
var xscale1 = d3.scale.linear().range([0, w/2+overlap]).domain([0, dataset.length-1]).clamp(true);
var xscale2 = d3.scale.linear().range([w/2-overlap, w]).domain([0, dataset.length-1]).clamp(true);
// So specifies the height as max in dataset and it takes up 1/2 the svg
var yscale = d3.scale.linear().domain([0, d3.max(dataset)]).range([h,h/2]);
var area1 = d3.svg.area()
.x(function(d,i) { return xscale1(i); })
.y0(h)
.y1(function(d,i) { return yscale(d); });
svg.append("path")
.datum(dataset)
.attr("class", "area1")
.attr("d", area1)
.attr("opacity",0.75)
.call(d3.behavior.drag().on("drag", dragged));
function dragged(d) {
// Current position:
this.x = this.x || 0;
this.y = this.y || 0;
// Update thee position with the delta x and y applied by the drag:
this.x += d3.event.dx;
this.y += d3.event.dy;
// Apply the translation to the shape:
d3.select(this)
.attr("transform", "translate(" + this.x + "," + this.y + ")");
}
<body></body>
<script src="https://d3js.org/d3.v3.min.js"></script>
It's actually the exact same way of doing as any other drags on other types of shapes. You just apply the drag behavior on the selected node.
Here is the part in charge of the drag implementation:
svg.append("path")
.datum(dataset)
.attr("d", area1)
...
.call(d3.behavior.drag().on("drag", dragged));
function dragged(d) {
// Current position:
this.x = this.x || 0;
this.y = this.y || 0;
// Update thee position with the delta x and y applied by the drag:
this.x += d3.event.dx;
this.y += d3.event.dy;
// Apply the translation to the shape:
d3.select(this)
.attr("transform", "translate(" + this.x + "," + this.y + ")");
}
The main thing you missed is the fact that the dx and dy you receive from the event are the movements of the mouse (the "delta" of movement). These movements can't become the new position of the shape. They have to be added to the existing x and y current position of the shape.
And here is the same code but for the version 4 of d3:
var w = 500;
var h = 250;
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h)
// Values for calculating pdf of normal distribution
var sigma = 4;
var mu = 0;
var N = 10;
var step = 0.1;
var dataset = [];
var x;
// creating the pdf of the normal distribution and plotting it for -N to N
var C = 1/(sigma*Math.sqrt(2*Math.PI));
for (x=-N; x < N; x += step) {
var E = (x-mu)/sigma;
E = -(E*E)/2;
var d = C*Math.exp(E);
dataset.push(d);
}
// Scales slightly over fancy, required for features stripped out
var overlap = w*0.1;
var xscale1 = d3.scaleLinear().range([0, w/2+overlap]).domain([0, dataset.length-1]).clamp(true);
var xscale2 = d3.scaleLinear().range([w/2-overlap, w]).domain([0, dataset.length-1]).clamp(true);
// So specifies the height as max in dataset and it takes up 1/2 the svg
var yscale = d3.scaleLinear().domain([0, d3.max(dataset)]).range([h,h/2]);
var area1 = d3.area()
.x(function(d,i) { return xscale1(i); })
.y0(h)
.y1(function(d,i) { return yscale(d); });
// plots filled normal distribution to svg
g1 = svg.append("path")
.datum(dataset)
.attr("class", "area1")
.attr("d", area1)
.attr("opacity",0.75)
.call(d3.drag().on("drag", dragged));
function dragged(d) {
// Current position:
this.x = this.x || 0;
this.y = this.y || 0;
// Update thee position with the delta x and y applied by the drag:
this.x += d3.event.dx;
this.y += d3.event.dy;
// Apply the translation to the shape:
d3.select(this)
.attr("transform", "translate(" + this.x + "," + this.y + ")");
}
<body></body>
<script src="https://d3js.org/d3.v4.min.js"></script>
I`m trying to make the rest of the chart transparent or set it to a specific color after I click on a specific slice of the doughnut. So far so good in console the filter is working if I hard-code the type it works( I set it to null at the beginning). I don't know why i can not get the slice that I click and make the rest of the chart set to that specific color. My though is that I have to update the chart somehow but with drawdata() function doesn't work ...
Here is my code:
var filter = {
device: null,
os_version: null,
app_version: null
};
// Creating the object Doughnut
var Doughnut = function(type) {
// Properties
var width = 160;
var height = 160
var radius = Math.min(width, height) / 2;
var donutWidth = 35;
var legendRectSize = 18;
var legendSpacing = 4;
var type = type;
// Array of Colors for the graph
var color = d3.scale.category20c();
var colorFunc = function(key) {
var normalColor = color(key);
if (filter[type] == null || key == filter[type]) {
console.log("normal color")
return normalColor;
}
console.log("trans color")
return "#d5eff2";
};
// Graph Elements
var chart = null;
var svg = null;
var path = null;
var legend = null;
// Our current dataSet
var dataSet = null;
// d3 functions
var arc = d3.svg.arc()
.innerRadius(radius - donutWidth)
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) {
return d.value;
});
// This is the initialize method - we create the basic graph, no data
var initialize = function(chartElement){
chart = chartElement;
svg = d3.select(chart)
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (height / 2) + ')');
};
var update = function() {
d3.json("./api/distribution/", function(data){
dataSet = data;
data.value = +data.value;
drawData();
});
}
var drawData = function() {
path = svg.selectAll('path')
.data(pie(dataSet[type]))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d) {
return colorFunc(d.data.key);
})
.on('click', function(d) {
if (filter[type] == d.data.key) {
filter[type] = null;
} else {
filter[type] = d.data.key;
}
console.log(filter)
// $(chart).empty()
drawData();
});
createLegends();
};
var createLegends = function() {
legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length /2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) {
return d;
});
};
return{
init: initialize,
update: update
}
};
// Here we create instance of doughnuts
var doughnutGraphs = (function() {
var init = function() {
// Create four doughnuts
var doughnut1 = new Doughnut("device");
var doughnut2 = new Doughnut("os_version");
var doughnut3 = new Doughnut("app_version");
// Initialize with an element
doughnut1.init("#chart_1");
doughnut2.init("#chart_2");
doughnut3.init("#chart_3");
// Update each of them with data
doughnut1.update();
doughnut2.update();
doughnut3.update();
};
return {
init: init
}
})();
I found the answer :
Create a method to clean then call it in the drawdata()
var clean = function() {
svg.selectAll('path').remove();
and call it .on('click')
.on('click', function(d) {
if (filter[type] == d.data.key) {
filter[type] = null;
} else {
filter[type] = d.data.key;
}
console.log(filter)
// $(chart).empty()
clean();
drawData();
});