I'm having trouble connecting points with a line on a map using d3. I think that I should use d3.svg.line() to create the points - but when I do it, I simply get a very small blob. Please see the link below for a screenshot of what I've been able to accomplish thus far - I want to connect the black dots with a line. Any help would be much appreciated.
Screenshot
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height*3 + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var group = svg.selectAll("g")
.data(data)
.enter()
.append("g")
var projection = d3.geo.mercator().scale(5000).translate([-2000,5900])
var path = d3.geo.path().projection(projection)
var graticule = d3.geo.graticule()
var line = d3.svg.line()
.interpolate("linear")
.x(function(d) { d.geometry.coordinates[0]; })
.y(function(d) { return d.geometry.coordinates[1] ; });
// this returns a parse error
// .x(function(d) { return projection(d.geometry.coordinates[0]); })
// .y(function(d) { return projection(d.geometry.coordinates[1]) ; });
var area = group.append("path")
.attr("d", path)
// .attr("d", line(data))
.attr("class", "area")
})
You have to pass both components of your coordinate to the d3.geo.mercator object, before taking each one separately as your x and y values. Your 'parse error' should go away if you use
.x(function(d) { return projection([d.lon, d.lat])[0]; })
.y(function(d) { return projection([d.lon, d.lat])[1]; });
instead. This post has a more complete example: D3 map Styling tutorial III: Drawing animated paths.
Hopefully once you are drawing the lines in the correct projection, they'll appear as you expect.
Related
I'm trying to generate data on the server side (Node.JS) and then pass it via res.render to a view.ejs page for use in a simple D3 lineChart. I can hard code the data on the ejs page with a successful chart rendering. But, when I try to pass the data object from Node via res.render, D3.data doesn't seem to recognize the data.
Here is the server side route:
router.get("/view", function(req,res){
let data = [
{evalDate: 1598038171322, evalHypValue: 18},
{evalDate: 1608038171322, evalHypValue: 27},
{evalDate: 1618038171322, evalHypValue: 29},
{evalDate: 1628038171322, evalHypValue: 30},
];
res.render("view",
{
Data: JSON.stringify(data),
});
});
And here is the view.ejs with the D3 code:
<div class="" id="hyp_chart"></div>
<script>
//NOTE: hard coded data works with the D3
//let data = [
// {evalDate: 1598038171322, evalHypValue: 18},
// {evalDate: 1608038171322, evalHypValue: 27},
// {evalDate: 1618038171322, evalHypValue: 29},
// {evalDate: 1628038171322, evalHypValue: 30},
// ];
//But I can't get this next line to use my server side data as input to D3
let data = <%=JSON.parse(Data)%>
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// parse the evalDate / time
var parseTime = d3.timeParse("%Q");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
.x(function(d) { return x(d.evalDate); })
.y(function(d) { return y(d.evalHypValue); });
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#hyp_chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// gridlines in x axis function
function make_x_gridlines() {
return d3.axisBottom(x)
.ticks(5)
}
// gridlines in y axis function
function make_y_gridlines() {
return d3.axisLeft(y)
.ticks(5)
}
// Get the data
// format the data
data.forEach(function(d) {
d.evalDate = parseTime(d.evalDate);
d.evalHypValue = Number(d.evalHypValue);
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.evalDate; }));
y.domain([0, d3.max(data, function(d) { return d.evalHypValue; })]);
// add the X gridlines
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines()
.tickSize(-height)
.tickFormat("")
)
// add the Y gridlines
svg.append("g")
.attr("class", "grid")
.call(make_y_gridlines()
.tickSize(-width)
.tickFormat("")
)
// add the valueline path.
svg.append("path")
.data([data])
// .datum(dataset)
.attr("class", "line")
.attr("d", valueline);
// add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
</script>
Thank you!!!
could you please help me with zooming to SVG objects. no idea how to do this.
i need to zoom and center by click on object, i've made a test plunkr, so please take a look: http://plnkr.co/edit/ZQxhQ8VVoIXjMvdFIvQF
here's full code:
$(function(){
svg = d3.select("#svg");
svg_group = d3.select('#outer_group');
zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([.5, 20])
.on("zoom", zoomed);
svg.call(zoom);
function zoomed() {
svg_group.style("stroke-width", 1.5 / d3.event.scale + "px");
svg_group.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
$zoomService.$broadcast('zoom', {
scale: d3.event.scale
});
}
$('.sector').click(function(){
//zoom to somehow??
});
});
You have to use call zoom.event explicitly on the correct element after setting the desired translation and scaling.
var zoomed = false;
$('.sector').click(function(){
var bbox = this.getBBox();
var scale = 4;
// Manually calculating the position to which to transition to
// Will differ on a case by case basis.
svg
.call(zoom
.translate([ (- bbox.x - bbox.width / 2) * scale
, (- bbox.y - bbox.height / 2) * scale
])
.scale(scale).event
);
});
Demo: http://plnkr.co/edit/h1UP87dfQneRCFye9Xtu?p=preview
In the demo, I changed the position of the polygons and the viewBox on the svg to make it easier to calculate the exact coordinates to transition to for the zoom to stay centered. I also added some transitions and zoom-to-zero behavior not shown in the code excerpt above.
Sidenote: You don't have to use jQuery here to bind to click events; D3's selection.on can provide that function.
I have a simple, modified version of the cluster diagram from D3 that I'm trying to get to respond to mouse clicks. It works for the links between nodes but not the nodes themselves. It looks to me like I'm treating lines and nodes (svg circles) the same, and yet nodes do not work... but of course D3 itself is generating those lines...
I have a very simple demo of it on JSFiddle at: http://jsfiddle.net/gaelicmichael1965/c2XWg/8/
What's going on? I would certainly appreciate any help that could be offered.
var nodes = tree.nodes(flareData),
links = tree.links(nodes);
// Create all of the link paths (using diagonal projection)
// Uses D3 functions to create SVG elements
var link = vis.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal)
.on("click", function(d, index) {
console.log("Selected line");
});
// Create all of the g-elements that contain node svg-elements
var node = vis.selectAll(".node")
.data(nodes)
.enter()
.append("circle")
.attr("class", "node")
.attr("r", 4.5)
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
// In actuality, will need to access property of d
.style( "fill", function(d, index) { return fillColors[index%4] } )
.on("click", function(d, index) {
console.log("Selected node");
});
The issue you have stems from your CSS. In particular, you are turning off pointer events for the nodes, meaning that mouse-triggered events (such as "click") are not processing:
.node {
font-size: 12px;
pointer-events: none; /*Comment out or remove this line*/
}
Comment out or remove the pointer-events:none; line in your CSS to allow the nodes to be the target of your "click" event.
I have generated a map of Phoenix from this GeoJson and made it show as I would like it to.
Now I would like to add circles to the map to represent something of interest, but the circles never show up. Here is the code:
<script type="text/javascript">
var h = 1280;
var w = 1280;
var projection = d3.geo.albers().scale(80000).center([0, 33.44]).rotate([112.07, 0]).translate([920, 850]);
var path = d3.geo.path().projection(projection);
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
d3.json("data/phoenix.json", function(json) {
svg.selectAll("path").data(json.features).enter().append("path")
.attr("d", path).style("fill", "grey");
var coordinates = projection([33.46764,112.0785]);
svg.append("circle")
.attr("cx", coordinates[0])
.attr("cy", coordinates[1])
.attr("r", 5)
.style("fill", "red");
});
</script>
I have tried following different tutorial and howto's like from bost.ocks.org and this where it's with a csv file, but no matter what I do it won't draw the circle, what am I missing?
Adam Pearce is correct that the coordinates are [33.46764, -112.0785], however there is another problem: when translating from lat-long to the coords, you need to pass longitude as the first parameter, not latitude!
The tricky thing is that the albers projection, if called with a value not in (lower 48, alaska, hawaii) returns null silently.
Trying to translate [33.46764, -112.0785] in the console:
> proj = d3.geo.albersUsa()
function albersUsa(coordinates) {
var x = coordinates[0], y = coordinates[1];
point = null;
(lower48Point(x, y), point) || (alaskaPoint(x, y), point) || hawaiiPoint(x, y);
return point;
} d3.v3.js:3257
> proj( [33.46764, -112.0785] )
null
> proj( [-112.0785, 33.46762] )
[241.08874867733104, 327.6295325563234]
Bingo. In this case, it was useful to take a look at the actual function we are calling by using the console (in this case, in Chrome).
This was done using d3 version 3.3.8.
Schimmy's answer is correct, however I didn't understand at first. Here's how I added a circle on an Albers map:
//var projection = d3.geo.albersUsa();
var coordinates = projection([-112.0785,33.46764]);
svg.append("circle")
.attr("cx", coordinates[0])
.attr("cy", coordinates[1])
.attr("r", 5)
.style("fill", "red");
You may also want to use attr("transform", "translate") rather than attr("cx", coor[0].attr("cy", coor[1]).
If you have a GeoJson fie of the US and you want to plot a circle on each county:
// us = the geoJson file
svg.append("circle")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
.attr("r", 5)
.style("fill", "red");
You may find this much more efficient than "cx" and "cy".
From http://bost.ocks.org/mike/bubble-map/
I am trying to use d3 to make a block which contains an arbitrary number of rects and text elements. The way I envisioned it was to nest everything within an svg and have the svg be dragable while everything moves along with it.
However, whenever I attach a drag behavior to the element it blurs whenever I move it. This behavior occurs even when I nest a g within the svg and everything else withing the g element.
Here is the simplified code. I have a main svg in which I insert another svg in which I nest a rect.
var dragT = d3.select('#test').append('svg').selectAll('svg.test')
.data([{x:100,y:100}])
.enter().append('svg')
.attr('x',100).attr('y',100)
.style('width',100)
.call(rectDragBehav).append('g')
.append('rect').attr('x',100).attr('y',100)
.attr('width',100).attr('height',100);
var rectDragBehav = d3.behavior.drag()
.on('drag', rectDragDrag)
function rectDragDrag(d,i) {
d.x += d3.event.dx;
d.y += d3.event.dy; console.log(1);
d3.select(this)
.attr('x',d.x)
.attr('y',d.y);//.attr("transform", "translate(" + d.x + "," + d.y + ")");
}
Update: I don't know what this entails, but I just discovered that when you scroll down so that the entire svg is out of sight and scroll back up, the afterimages disappear.
Fill your SVG with a big white background <rect /> behind the content, e.g.
<svg …>
<rect fill="white" x="-100" y="-100" width="2000" height="2000" />
…
</svg>
You're just seeing redraw errors from the browser not properly dirtying the changed region. I was seeing the same thing today with Chrome on Windows on this test, but the problems do not appear on any browser under OS X.
Here is an example using jsFiddle. I have made the sample to help you, and I hope it will be beneficial for you.
The HTML:
<svg height="400" width="600"></svg>
The JavaScript:
function onDragDrop(dragHandler, dropHandler) {
var drag = d3.behavior.drag();
drag.on("drag", dragHandler).on("dragend", dropHandler);
return drag;
}
var g = d3.select("body").select("svg").append("g").data([{ x: 50, y: 50 }]);
g.append("rect")
.attr("width", 40)
.attr("height", 40)
.attr("stroke", "red")
.attr("fill","transparent")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.call(onDragDrop(dragmove, dropHandler));
g.append("text")
.text("Any Text")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.call(onDragDrop(dragmove, dropHandler));
function dropHandler(d) {
// alert('dropped');
}
function dragmove(d) {
d3.select(this)
.attr("x", d.x = d3.event.x)
.attr("y", d.y = d3.event.y);
}