I am trying to draw objects parallel to the right of the series. Though I am able to do so, but they are getting chopped off. I could append the objects to the svg, but they dont maintain their positions. Need help to fix this. I am not sure how to push the "g".
my fiddle:
https://jsfiddle.net/sourabhtewari/xzsq4t1z/32/
This is what I am trying in the OnRendered of c3js
d3.select('.c3-chart-lines')
.append("circle")
.attr("cx", path.getPointAtLength(len-1).x + 60)
.attr("cy", path.getPointAtLength(len-1).y)
.attr("r", "15px")
.attr("fill", "red");
They're getting clipped out.
Try removing the clip-path on elements with the c3.chart class:
d3.selectAll(".c3-chart").attr("clip-path", null);
https://jsfiddle.net/xzsq4t1z/70/
This may mean you get other things coming out of the clip bounds too, but I couldn't see anything on a quick look
Related
Hi Stackoverflow folks,
I have a question on D3.js
Basically what I want to achieve is the change of the shape as below.
However,
Once I finished the coding of the first drawing, the coordinate information was as below.
d3.selectAll('body').select('svg').append('rect')
.attr('x', 50)
.attr('y', 50)
.attr('width',150)
.attr('height',150)
.attr('fill','none')
.attr('stroke-width',2)
.attr('stroke','black')
I tried to change the shape as I clicked the rectangle.
So I made a click event. But!
the Parallelogram I want to achieve should be made of 'path'.
How do I change the square shape as I click the square.
Since I want to do 'animate'for the change,
simply toggle off the square and and toggle on Parallelogram is not what I'm trying to make.
Can any please help me?
Or anyone has better solution for this??
Thank you in advance.
I want to add a watermark to a c3js chart, am not sure where to begin, and would appreciate any pointers in the right direction. Thanks.
You could get the root div of the chart and add a background-image:
http://jsfiddle.net/z47qk7u1/
d3.select(chart.internal.config.bindto)
.style ("background-image", "url('https://cdn.pixabay.com/photo/2013/07/13/12/42/do-not-copy-160138_960_720.png')")
.style ("background-size", "160px 160px")
.style("background-repeat", "repeat")
;
The trouble is, whatever you do here can be as easily removed as it is added, so if you're using the watermark to stop people copying things then anyone with a modicum of DOM knowledge can get round it. I know I do for all these "we detect you're using an adblocker modals" some sites pop up.
Building off mgraham's answer, you can add an text element to the chart's internal svg element.
d3.select(chart.internal.config.bindto).select("svg")
.append("text")
.text(text)
.attr("y","50%")
.attr("x","50%")
.style("fill", "grey")
.style("font-size", "50")
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle")
I am using D3.js to plot a lot of little data points (as circles) on a map. No big deal there. I would like to add the ability to zoom and pan, however.
I have been using this version of the zooming function: http://bl.ocks.org/mbostock/2206340
It works great on my map base (e.g. the country forms). But it does not move the data points. (I attempted to simply add the data to the "features" layer but this did not work well — it put them underneath the landforms and made it so that they no longer triggered mouseover events, presumably because they are under the layer that looks for pan/zoom events.)
Here is what my map look like:
If I do nothing when I pan/zoom, it obviously doesn't look very good:
I have tried to use the zoom/translate events to adjust the projection, then re-project the data points. This works great for panning but totally fails for zooming:
You can't really tell from the image above but the relative distances between the images have indeed moved with the zooming. But the pan translation is totally off.
Here is the function I am using to handle the zooming:
function zoomed() {
features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
features.select(".state-border").style("stroke-width", 1.5 / d3.event.scale + "px");
features.select(".county-border").style("stroke-width", .5 / d3.event.scale + "px");
projection.scale(projection_scale*d3.event.scale);
projection.translate([((width/2)+d3.event.translate[0]),((height/2)+d3.event.translate[1])]);
for(i in cdata) {
var ll = cdata[i].LatLng.split(",");
if(!ll[0]) ll[0]=-500;
if(!ll[1]) ll[1]=-500;
positions[cdata[i].id]=(projection([parseFloat(ll[1]),parseFloat(ll[0])]));
}
svg.selectAll(".data_circle")
.attr("cx", function(d, i) { return positions[d.id][0]; })
.attr("cy", function(d, i) { return positions[d.id][1]; })
;
}
cdata is an object with all of my csv-loaded data in it, including lat/lng data as a comma-separated string (hence the split). The -500 thing is just for bad data; it puts it where you can't see it (a temporary fix). positions is an array of all the projected lat/lng positions.
Obviously I'm thinking about this incorrectly. I've tried scaling the translate function by the zoom amount (e.g. ((width/2)+d3.event.translate[0])*d3.event.scale) ) but this produces really odd results as well (it seems to help a bit but the pan/zoom become a little "unhinged" — it is almost as if the dots are hovering above the map in 3D space, and moving left and right makes them almost seem a little stereoscopic... anyway, not the effect I am trying to produce).
What should I be doing differently? Again, any solution needs to take into account that the dots have mouseover events on them that need to be able to fire.
I've searched the zooming D3 examples for something that does this and not found one, which surprised me, since this seemed like kind of basic functionality (and is something easy to do in Google Maps, for once), but maybe I didn't search deep enough or in the right place.
Ah, I figured it out! It suddenly occurred to me what the problem was. All it required was changing:
projection.translate([((width/2)+d3.event.translate[0]),((height/2)+d3.event.translate[1])]);
to
projection.translate([((width*d3.event.scale/2)+d3.event.translate[0]),((height*d3.event.scale/2)+d3.event.translate[1])]);
Which makes sense — the original width/height were not the same because it was being zoomed, so I needed to apply the translation to the zoomed width/height. Now it works great.
This great tutorial shows how to update all svg elements. How would I select just one element and update it? I know how to add event listeners in D3.js to update single elements, but what if I need to update an element due to some external factor? Thanks.
This page covers all of the ways you can select element(s): https://github.com/mbostock/d3/wiki/Selections
For example, you could do something like:
var circle = svg.select("#circle-0");
circle
.transition()
.duration(750)
.style("fill", "steelblue");
Here is a working example: http://jsfiddle.net/elevine/FYY9k/
I'm using a D3 tree. Similar to: http://bl.ocks.org/mbostock/4063570
However, this particular diagram is bigger than the browser window.
Given that i know exactly which one of the JSON element's that i want to reveal.
How could i scroll that element into view within the svg canvas?
The easiest way to achieve this is probably to wrap what you want to appear in a g element and use a transition on the translation.
groupToShow.attr("transform", "translate(1000,1000)")
.transition()
.duration(1000)
.attr("transform", "translate(0,0)");
Adapt the values for translation and duration as needed.