We Keep Coding

d3 add line to existing plot

I'm creating scatterplots with D3 and want to superimpose some lines (a boxplot, eventually). I'm totally failing to append any line to the plots and don't get why. The code below is just one attempt of many.
I've searched and found various solutions, but haven't managed to get any of them to work. I'd be grateful of any help.
svg[i].selectAll(".dot")
.data(thedata)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 4.5)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", "steelblue");
// Try to add arbitrary line
svg[i].append("line")
.attr("x1", 0)
.attr("x2", 3)
.attr("y1", 0)
.attr("y2", 4);
In case it's of interest, the use case is here: https://goo.gl/nbVfvu
Thanks

I think you are missing style attribute for the line, add style attribute for the line. Example as below.
svg[i]
.append("line")
.attr("x1",30)
.attr("y1",20)
.attr("x2",11)
.attr("y2",1)
.style("stroke", "black")

d3 click handler not working on leaflet map layer

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"});
}

Convert text header of image appended to node in typical graph of nodes and link, to image in D3

I would like to add header to my nodes in d3. But instead of appending it as text I want to append it as image so that in graph scenario all lines will be below header and picture will look cleaner.
Currently because of many links picture looks messy which I want to avoid.
node.append('text')
.attr("class","label")
.attr("style","font-size:12px;")
.html(function(d){
return d.name;
}
})
.attr("x",0)
.attr("y",-radius);
Is there any way how to do this. I read about hidden canvas but not sure exactly how to use here as I am beginner in D3.
Thanks

You can append an image as well.
I've set up a fiddle here, to showcase a working example of appending an image(icon) inside a circle.
node.append("circle")
.attr("cursor","pointer")
.attr("cx", 200)
.attr("cy", 200)
.attr("r", 25)
.style("fill","white")
.style("stroke", "black")
.style("stroke-width", 2);
node.append("image")
.attr("xlink:href", "http://i.stack.imgur.com/bZXWH.png")
.attr("x", 185)
.attr("y", 185)
.attr("width", 32)
.attr("height", 32);
You might also find this tutorial helpful.

Unable to get drop-shadow on the bars

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.

Remove and update Stacked Area chart with d3

I have a stacked Area Chart using D3 that renders and displays fine. The chart also has a legend.
The issue is that I need to chart to update when a user clicks/taps on one of the legend entries. And by update I mean remove the entry that was selected and redraw the chart with the remaining values.
I have the interaction working fine (selecting a Legend item triggers the redraw) but I can't get it to remove the no longer existing entry on the chart. If I add path.exit().remove() to the code below it always removes the top most path no matter what entry was selected.
If I update using the second chunk of code it does redraw properly and even removes the correct entry from the chart save for the top most. It never removes that one.
I've tried combining the two as well to no avail. Any help or guidance would be appreciated.
svg.selectAll(".layer")
.data(layers);
path.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return d.color });
Update chart:
svg.selectAll(".layer")
.data(layers)
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return d.color || color(d.label); })
.transition() // start a transition to bring the new value into view
.ease("linear")
.duration(500)