d3 click to center content at position of element or click - d3.js

I have been trying to get the basics of how I make a pannable zoomable, and click to center zoom on element d3 work. This example is what I want to do but I am having trouble translating it outside of the geo context: https://bl.ocks.org/mbostock/2206340
What I have accomplished is the first two parts pan and zoom, see a basic fiddle here https://jsfiddle.net/e9fbn2xp/
How can I accomplish centering the the circle in the center of the viewable window, so it looks like the circle is zoomed to? Note that although this is a fixed position circle I will eventually have dynamic data, so ideally I could reference the circles position dynamically.
Here is my code:
HTML (note that this is React JSX syntax but that should be irrelevant to question)
<div style={{width: 800}}>
<svg style={{border: '1px solid black'}} id="viz" width="800" height="800">
</svg>
</div>
JAVASCRIPT
var svg = d3.select("#viz")
var width = svg.attr("width");
var height = svg.attr("height");
var testLayer = svg.append('g');
var aRect = testLayer.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("height", 800)
.attr("width", 800)
.attr("fill", 'green');
var aCircle = testLayer.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 200)
.attr("cy", 200)
.on("mousedown", zoomToMe);
function zoomToMe(){
console.log("do the zoom")
}
var zoom = d3.zoom()
.scaleExtent([.5, 40])
.translateExtent([[0, 0], [width, height]])
.on("zoom", zoomed);
svg.call(zoom);
function zoomed() {
testLayer.attr("transform", d3.event.transform);
}
svg.on("click", function() {
var coords = d3.mouse(this);
})

I got a working solution and thought I would share the code in case others find it useful. It is a fairly different approach then my original but accomplishes the three goals, pan, mouse zoom, zoom to element. While these are three simple static circles the same concept should work with a dynamic dataset.
fiddle: https://jsfiddle.net/uc7oprx3/5/
HTML
<svg id="viz" width="400" height="400" />
JAVASCRIPT
var zoom = d3.zoom()
.scaleExtent([0.3,2])
.on("zoom", zoomed);
var svg = d3.select("#viz")
var width = svg.attr("width");
var height = svg.attr("height");
var zoomer = svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.call(zoom);
var g = svg.append("g");
var aCircle = g.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 200)
.attr("cy", 200)
.on("mousedown", () => centerNode(200, 200));
var bCircle = g.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 400)
.attr("cy", 400)
.on("mousedown", () => centerNode(400, 400));
var cCircle = g.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 600)
.attr("cy", 600)
.on("mousedown", () => centerNode(600, 600));
function zoomed() {
g.attr("transform", d3.event.transform);
}
function centerNode(xx, yy){
g.transition()
.duration(500)
.attr("transform", "translate(" + (width/2 - xx) + "," + (height/2 - yy) + ")scale(" + 1 + ")")
.on("end", function(){ zoomer.call(zoom.transform, d3.zoomIdentity.translate((width/2 - xx),(height/2 - yy)).scale(1))});
}

Related

Draggable interactive graphic element using D3

I have a challenging idea to build and couldn't think about a solution yet. The design request to have interactive/draggable graphics, as the one I send by the link below.
However, those graphics elements will be distributed in specific places on the page, with other elements around (Text, images, etc). The idea is to let the user "to play" with the graphics circles, just doing something 'cool and fun'. The user must be able to drag the circles from the graphics and change its visual all along the page.
The problem is: If I place this element in an specific place (inside a div, for example), if we drag the circles outside the 'canvas' area, the elements is no longer visible.
How could I place this canvas-div element in specific place and at the same time to allow the elements inside it to go the outside limited zone?
I thought about putting it in position relative or absolute with 100% height and width of the page, but it will be out of its place in responsive I guess, or pretty complicate to place always at a good place by just using % position. Any suggestion?
I'm using d3.js
Thanks!!
Heres the link: https://codepen.io/A8-XPs/pen/ePWRxZ?editors=0010
HTML
<svg width="500" height="350"></svg>
JS
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
let points = d3.range(1, 10).map(function(i) {
return [i * width / 10, 50 + Math.random() * (height - 100)];
});
var x = d3.scaleLinear()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var xAxis = d3.axisBottom(x),
yAxis = d3.axisLeft(y);
var line = d3.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); })
.curve(d3.curveCatmullRom.alpha(0.5))
let drag = d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended);
svg.append('rect')
.attr('class', 'zoom')
.attr('cursor', 'move')
.attr('fill', 'none')
.attr('pointer-events', 'all')
.attr('width', width)
.attr('height', height)
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
var focus = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(d3.extent(points, function(d) { return d[0]; }));
y.domain(d3.extent(points, function(d) { return d[1]; }));
focus.append("path")
.datum(points)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
focus.selectAll('circle')
.data(points)
.enter()
.append('circle')
.attr('r', 5.0)
.attr('cx', function(d) { return x(d[0]); })
.attr('cy', function(d) { return y(d[1]); })
.style('cursor', 'pointer')
.style('fill', 'steelblue');
focus.selectAll('circle')
.call(drag);
focus.append('g')
.attr('class', 'axis axis--x')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
focus.append('g')
.attr('class', 'axis axis--y')
.call(yAxis);
function dragstarted(d) {
d3.select(this).raise().classed('active', true);
}
function dragged(d) {
d[0] = x.invert(d3.event.x);
d[1] = y.invert(d3.event.y);
d3.select(this)
.attr('cx', x(d[0]))
.attr('cy', y(d[1]))
focus.select('path').attr('d', line);
}
function dragended(d) {
d3.select(this).classed('active', false);
}
PS: I got to solve the problem by just applying simple CSS to the SVG:
Overflow: visible;
Hopefully it will work in a real page scenario as well.

D3JS: unable to make a bar chart fit the viewport in landscape mode

I have this code, which creates a horizontal bar chart, and it fits nicely to any screen width , but only when the document loads or reload. When I rotate my mobile to landscape mode it does not re-render again according to the new dimensions of the screen, despite I tried to use a addEventLisenet for resize event.
I'll leave a running snippet of my code so that you can see what I am doing wrong.
Thanks a lot for the help.
var data = [72,70,65,58,51,50,21,15,13]
var categoryData = ["International assignment allowance and benefits.","Tax and social security cost.","Relocation costs.","Prepared at start of assigment.","Assignee-specific data.","Vendor fees.","Incentive compensation (projected).","Employee benefit plan contributions and deduction.","They are rough calculations."/*"They are detailed and precise"/*,"General data (not assignee-specific)","Updated annually","Updated for change in assignement policy","Updated for approved policy exceptions"*/]
var width = $(window).width(),
barHeight = 20,
margin = {left:15,top:15,right:15,bottom:15}
var widthScale = d3.scaleLinear()
.domain(d3.extent(data,function(d){return d }))
.range([50, width - 40]);
var svg = d3.select("body")
.append("svg")
.attr("width", width - margin.left - margin.right)
.attr("height"," 100vh")
.attr("id","SVGCanvas")
var mainTitle = svg.append("text")
.attr("class","mainTitle")
.html("Which of the following statements describe your")
.attr("transform","translate(5,60)")
.attr("font-weight","bold")
var mainTitle2 = svg.append("text")
var mainTitle2 = svg.append("text")
.attr("class","mainTitle2")
.html("approach to cost estimates? (Select all that apply.)")
.attr("transform","translate(5,78)")
.attr("font-weight","bold")
.style("float","left")
var mainBarG = svg.append("g")
.attr("class","mainBarG")
.attr("transform","translate(5,142)")
var g = mainBarG.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class","bGroup")
.attr("transform", function (d, i) {
return "translate(0," + ((i * barHeight*3) ) + ")";
});
g.append("rect")
.attr("width",0)
.transition()
.duration(800)
.delay(function(d,i){return i*25})
.attr("width", function (d) {
return widthScale(d);
})
.attr("height", barHeight*1.3 )
.attr("class","bars")
.attr("fill","#00338D")
.attr("id", function (d,i) {
return "barra" + i;
})
g.append("text")
.attr("x", function (d) { return widthScale(d) })
.attr("y", barHeight / 2)
.attr("dy", ".6em")
.attr("dx", "-2.5em")
.text(function (d) { return d + '%' })
.attr("font-size", 13)
.attr("font-weight", "bold")
.attr( "rx","20")
.attr( "ry","20")
.attr("class","barsText")
.attr("fill","#FFF")
g.append("text")
.data(categoryData)
.attr("x", 0)
.attr("y", (barHeight / 2) - barHeight *.8)
.attr("font-size", 13)
.attr("class","barsText")
.text(function (d) { return d })
setTimeout(function(){
$(".barsText").animate({opacity: 1});
},900);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>

Changing the angle of a D3 doughnut chart to 180

I need to make my doughnut chart a horizontal graph like in this image >
this is the code that i use for other doughnut charts
var dataset = {
hddrives: [total - value, value],
};
var width = 460,
height = 300,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range([secondColor, mainColor]);
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 70);
var svg = d3.select(divName).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//Draw the Circle
svg.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 65)
.attr("fill", "#F6FBF3");
var path = svg.selectAll("path")
.data(pie(dataset.hddrives))
.enter().append("path")
.attr("class", "arc")
.attr("fill", function (d, i) { return color(i); })
.attr("d", arc);
svg.append("text")
.attr("dy", "0em")
.style("text-anchor", "middle")
.attr("class", "inside")
.attr("font-size", "30px")
.text(function (d) { return value; });
svg.append("text")
.attr("dy", "1.5em")
.style("text-anchor", "middle")
.attr("class", "data")
.text(function (d) { return nomeGtin; });
}
I tried messing around with the attr values and the arc value, but without success, any ideas on how to approach this? Thanks
That isn't much of a donut chart, it's now a stacked bar chart (with a single bar). The pie and arc helpers aren't much help for that, they are concerned with calculating angles and circular things; you are now dealing with rectangles. d3.stack could help, but is probably overkill. Here's a quicky where I've just done the math (ie positioning) myself:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
</head>
<body>
<script>
var width = 500,
height = 200,
w = 300,
h = 100;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var total = 0,
l = 0,
// fake random data
raw = d3.range(5).map(function(d){
var v = Math.random() * 10;
total += v;
return v;
}),
// calculate percents and cumulative position
data = raw.map(function(d){
var rv = {
v: d,
l: l,
p: d/total
}
l += rv.p;
return rv;
});
// scale and color
var s = d3.scale.linear()
.range([0, w])
.domain([0, 1]),
c = d3.scale.category20();
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', function(d){
return s(d.l) + width/2 - w/2; // place based on cumulative
})
.attr('width', function(d){
return s(d.p); // width from scale
})
.attr('height', h)
.attr('y', height/2 - h/2)
.style('fill', function(d,i){
return c(i);
})
.style('stroke', 'white')
.style('stroke-width', '2px');
</script>
</body>
</html>

how to drag element with mouse move

After appending or creating a new circle on drag, I want to able to drag the circle around. I tried with the following code using .call(d3.behavior.drag()...) but don't know why it isn't working
Preview: http://jsbin.com/vabowofiqe/1/edit?html,output
code:
var svgContainer = d3.select("body").append("svg")
.attr("width", 800)
.attr("height", 803);
//Draw the Circle
var circle = svgContainer.append("circle")
.attr("cx", 35)
.attr("cy", 145)
.attr("r", 25)
.style("stroke-opacity", .9)
.style("stroke", "green")
.style("stroke-width", 2)
.style('cursor', 'move')
.style("fill", "white");
function move() {
d3.select(this)
.attr('x', d3.event.x)
.attr('y', d3.event.y);
};
var drag = d3.behavior.drag()
.origin(function ()
{
var t = d3.select(this);
return {x: t.attr("x"), y: t.attr("y")};
})
.on('dragend', function (d) {
var mouseCoordinates = d3.mouse(this);
if (mouseCoordinates[0] > 170) {
//Append new element
var newCircle = d3.select("svg").append("circle")
.classed("drg", true)
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 20)
.attr("cx", mouseCoordinates[0])
.attr("cy", mouseCoordinates[1])
.style("fill", "white")
.style("stroke-width", 2)
.style("stroke", "#CDB483")
//Calling the drag behavior after clonning .call(
d3.behavior.drag()
.on('drag', move).origin(function () {
var t = d3.select(this);
return {x: t.attr("cx"), y: t.attr("cy")};
}));
;
}
});
circle.call(drag);
A SVG circle element doesn't have x and y properties, but cx and cy properties that can be used to position them. You should change your move function accordingly.
function move() {
d3.select(this)
.attr('cx', d3.event.x)
.attr('cy', d3.event.y);
};

Showing Data in Rectangle on the click of circle using d3.js

I Have few circles that contain people names,I need to show their information on the click of circle in rectangle using d3.js
Below is my script
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
d3.json("data.json", function (json) {
/* Define the data for the circles */
var elem = svg.selectAll("g myCircleText")
.data(json.nodes)
/*Create and place the "blocks" containing the circle and the text */
var elemEnter = elem.enter()
.append("g")
.attr("transform", function (d) { return "translate(" + d.x + ",80)" })
/*Create the circle for each block */
var circle = elemEnter.append("circle")
.attr("r", function (d) { return d.r })
.attr("stroke", "black")
.attr("fill", "white")
.on("click", function () {
var s = svg
.selectAll("circle");
s
.append("rect")
.attr("x", 100)
.attr("y", 200)
.attr("width", 200)
.attr("width", 200)
.style("fill", "red");
});
/* Create the text for each block */
elemEnter.append("text")
.attr("dx", function (d) { return -20 })
.text(function (d) { return d.label })
})
below is the json file:
{"nodes":[
{"x":80, "r":40, "label":"Sam","info":"Developer"},
{"x":200, "r":60, "label":"Pam","info":"Programmer"},
{"x":380, "r":80, "label":"Ram","info":"Architect"}
]}
Circles are being drawn with names but when I click on circles nothing is happening.
Please help.
Thanks
Two issues with your onclick function. First, width is set a second time instead of height:
.attr("width", 200)
.attr("width", 200)
Second, you're appending a rectangle to a circle:
var s = svg.selectAll("circle");
s.append("rect")
which isn't valid for a svg:
<circle r="60" stroke="black" fill="white">
<rect></rect>
</circle>
Instead, the rectangles should be appended to root of the svg or a g element.
Working code:
.on("click", function () {
svg.append("rect")
.attr("x", 100)
.attr("y", 200)
.attr("width", 200)
.attr("height", 200)
.style("fill", "red");
});

Resources