Been playing with D3 for a few days. I got a world map drawn, and some "events" with geo that are displaying on the map.
Each event is compsosed of longitude,latitude,date
The date ranges is from june 1st to August 31st.
When event are added to map as time progress, I have a plain circle. However, I would like to achieve a nice glowing effect, to emphasis the current geo point being an event. (example here : https://www.youtube.com/watch?v=ssbQ2PVxGng )
So far I have come with:
svg.append('svg:circle')
.attr('cx', coordinates[0])
.attr('cy', coordinates[1])
.attr('r', 4)
.transition('next', function() {
d3.select(this)
.duration(300)
.attr('r', 7)
.attr('fill', 'yellow')
.attr('fill-opacity', .3);
})
.attr('fill', 'orange');
But I have no luck so far.
Related
I want to make chart.js like the following the example.
When I hover the chart, the Element transform scale up
How can I make it?
example Link:http://bl.ocks.org/erichoco/raw/6694616/
You can analyze the javascript code of your exemple.
I think that the function that doing this, is this one:
paths.enter()
.append('svg:path')
.attr('d', arc)
.style('fill', function(d, i) {
return color(i);
})
.style('stroke', '#FFFFFF')
.on(eventObj)
Still being rather inexperienced in using d3.js I have hit a road block.
Hoping anybody out there can help me.
I am trying to display a picture upon mouse click on a node in a graph.
Ideally, I'd like to click on several nodes and display images. Double click on a node should remove the image. And clicking on the background removes all displayed images. But one step at a time.
What I have done so far is:
Succeeded in using tooltips. I was also able to change the size of a circle node upon mouse clicking on it.
I used as toy project Mike Bostock's force-directed graph example: https://bl.ocks.org/mbostock/4062045 .
I am using d3.js v4
Based on an example on the web I was able to add pictures to all nodes:
Add different images for nodes in d3 v4 network graph
I tried to tailor this example to my needs. First I added:
var defs = svg.append('defs');
Further more:
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter()
.append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(node_drag)
.on("click", function(d){
defs.append("pattern")
.attr("x", 0)
.attr("y", 0)
.attr("width", 12)
.attr("height", 12)
.append("image")
.attr("xlink:href", 'https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png')
.attr("width", 12)
.attr("height", 12)
.attr("x", 0)
.attr("y", 0);
})
In my browser the html indicates that the image is added:
But the image is not showing in the browser.
At this point I am turning to you and hope for some hints how I can accomplish displaying an image as node upon clicking with my mouse cursor on it.
Any input is highly appreciated,
Markus
Your inspector is showing that the image was appended to the pattern, but it was never linked to the circle element.
Instead of appending the pattern to the defs inside the click function, you should just append the pattern with a given ID...
var defs = svg.append('defs');
defs.append("pattern")
.attr("x", 0)
.attr("y", 0)
.attr("id", "myPattern")//ID here
.attr("width", 12)
.attr("height", 12)
.append("image")
.attr("xlink:href", 'https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png')
.attr("width", 12)
.attr("height", 12)
.attr("x", 0)
.attr("y", 0);
... and then, inside the click, just change the fill of the circle according to that ID:
.on("click", function() {
d3.select(this).attr("fill", "url(#myPattern)")
})
Here is Bostock's bl.ocks with those changes (I made the circles bigger so you can better see the image): https://bl.ocks.org/anonymous/0e653b6d21c8d57afa234d5d1765efe0/78ba15e533a2b8f8e6575a30d97b27d156ce2faf
I have a line-chart created with d3.js which shows two intersecting graphs (series of data-points). The intersection position gets calculated via javascript by using a lineIntersection-Algorithm and returns an x/y-object. I would like to create a circle at this position or a vertical line to show the break-even which gets visualized with this intersection.
Using d3 I wrote the following function to add a svg-circle to the chart:
d3.select('.nv-lineChart').append('circle')
.attr("cx", intersection.x)
.attr("cy", intersection.y)
.attr("r", 5.5)
.style("fill", "white")
.style("stroke", "black");
The problem is: the intersection coordinates need to be applied to the line-chart's coordinate-space.
I have no real clue how to do that - the d3 documentation is not really helpful for this.
Does anyone have a solution for this?
Good evening.
I've added a series of d3 points to a leaflet map, and then wanted to use click handlers on those points to drive another panel. But I don't seem to be able to get the handler to pick up. Why?
You can see the file so far:
http://jsbin.com/bewudenide/edit?html,output
The code that generates the circle points on a custom layer on leaflet.js:
var feature = g.selectAll("circle")
.data(collection)
.enter().append("circle")
.style("stroke", "black")
.style("opacity", .6)
.style("fill", "steelblue")
.attr("r", 10);
I thought it would be simple case of adding click handlers for the mouseover and click events thus:
feature.on("click", click);
function click(d) {
console.log(d.name);
}
And:
feature.on("mouseover", mouse_over);
function mouse_over(d) {
d3.select(this)
.transition()
.duration(500)
.style("background", "lightBlue")
.style("color", "white");
}
While the click function registers to console, I'm not clear why the mouse_over function doesn't change the style of the point. I was also expecting to see the pointer to change, but it doesn't.
Please excuse my lack of experience with d3, javascript or leaflet.
EDIT:
I now realise that I hadn't added some of the JSON used by the existing code. It looks like
[{
"index":1,"name":"Adderley Green Surgery","total":276266.2700000001},{
"index":2,"name":"Alton Surgery","total":416559.8999999998},{
"index":3,"name":"Apsley Surgery","total":1023757.89999999998}]
If you are using leaflet 1.0, I think the reason is that leaflet has set "pointer-event" as "none":
Figure showing SVG within leaflet
which makes the click event cannot be fired. So the solution is quite simple, just set "pointer-event" as "all" by using css, then it works! I have tried it by using leaflet 1.0.
pointer-events:
pointer-events description
The problem is that the style attributes are not valid for the svg element.
Try...
feature.on("mouseover", mouse_over);
function mouse_over(d) {
d3.select(this)
.transition()
.duration(500)
.style("fill", "lightBlue")
.style("stroke", "white");
}
Or...
feature.on("mouseover", mouse_over);
function mouse_over(d) {
d3.select(this)
.transition()
.duration(500)
.style({fill: "lightBlue", stroke: "white"});
}
Or...
feature.on("mouseover", mouse_over);
function mouse_over(d) {
d3.select(this)
.transition()
.duration(500)
.attr({fill: "lightBlue", stroke: "white"});
}
I am working on a bar chart and I need to get the chart to look like this:
Here is what I tried:
.attr("id", "drop-shadow")
.attr("height", "130%");
but it did not work.
jsfiddle
How do I fix this?
Try this fiddle.
Chart looks like that same as the image.
But i didn't do it adding a drop shadow.
Added ellipse before the bar being created and that gives the same effect as above.
svg.selectAll(".ellipse")
.data(data)
.enter()
.append("ellipse")
.attr("cx", function(d) { return x(d.age) + 30; })
.attr("cy", function(d) { return y(0); })
.attr("rx", 35)
.attr("ry", 5)
.style("fill", function(d) { return d.color2; })
This is very simple. You need to create a ellipse before the bar is created.
When we position the ellipse it acts like a drop shadow.
Sorry that i don't have time to get the contrasting colors of the bar. But you can amend it of course.
If you'd like to do it with a drop shadow.
Here's a link that requires a javascript library for the drop shadow of the svg elements.
Hope this helps.