The key bit that’s missing is the check whether the default behaviour of an event has been prevented. That is, there’s a matching sibling to d3.event.preventDefault() — d3.event.defaultPrevented. You need to check this in your click handler to see whether any dragging action is going on. See also the answer to this question.
You are adding a text element inside a circle, that won’t work. You can add groups under the svg element and then append the circle and a text in each group: // Create the groups under svg var gnodes = svg.selectAll(‘g.gnode’) .data(graph.nodes) .enter() .append(‘g’) .classed(‘gnode’, true); // Add one circle in each group var node … Read more
Update for D3 v4 (using ES6): // Can also be axisTop, axisRight, or axisBottom d3.axisLeft() .tickFormat(d => d + “%”) Original answer for D3 v3: You can create your own format: d3.svg.axis() .tickFormat(function(d) { return d + “%”; }); If you want to get rid of the decimal places: d3.svg.axis() .tickFormat(function(d) { return parseInt(d, 10) … Read more
The default ticks for quantitative scales are multiples of 2, 5 and 10. You appear to want multiples of 6; though unusual, this could make sense depending on the nature of the underlying data. So, while you can use axis.ticks to increase or decrease the tick count, it will always return multiples of 2, 5 … Read more
This process is now simplified (July 2014) compared to the steps I see in the accepted answer. It now seems much easier to get this data. I at first floundered around the web hoping I could just download a bunch of standard maps in GeoJSON format, but came up empty other than standard US/Canada offerings. … Read more
As mentioned in the other answer, I know this is a very old post but hopefully the following will help someone… I made a pen that I think hits all the requirements mentioned. As I didn’t have a real API to use, I created some data using a json-generator (great tool), included it, and sorted … Read more
Create one function that (re)draws the pie when it’s created and when it’s updated. New data should be added to pie using enter() and old data should be removed using exit().remove() It is as simple as this: path.enter().append(“path”) .attr(“fill”, function(d, i) { return color(i); }) .attr(“d”, arc) .each(function(d) {this._current = d;} ); path.transition() .attrTween(“d”, arcTween); … Read more
I know you asked about D3, but this might be a native solution to your issue. The HTML5 canvas 2D context has some built-in functionality to measure text. You might be able to tap into that to measure text for other APIs like SVG. If it’s not 100% accurate, surely it’s proportional to the correct … Read more
Well I could find the solution browsing through, posting it here for anyone needing help on this topic. The idea is to create an object of the graph and playing around with the nodes and links arrays. The JS code goes as: var graph; function myGraph(el) { // Add and remove elements on the graph … Read more
<svg class=”svg” height=”3300″ width=”2550″> <image x=”0″ y=”0″ height=”3300″ width=”2550″ xlink:href=”https://stackoverflow.com/questions/19710174/1.jpg”></image> <rect class=”word” id=”15″ x=”118″ y=”259″ width=”182″ height=”28″ text=”Substitute”></rect> </svg> <script> var body = d3.select(“body”); console.log(body); var svg = body.select(“svg”); console.log(svg); console.log(svg.style(“width”)); </script> Just place your script after svg element is loaded by the browser and all will be fine.