You can disable the double-click behavior by removing the zoom behavior’s dblclick event listener. Looking at your code, you’ve assigned the zoom behavior to the SVG element. So you could say: d3.select(“svg”).on(“dblclick.zoom”, null); Or, together with where you register the zoom behavior: .call(d3.behavior.zoom().on(“zoom”, update)).on(“dblclick.zoom”, null) You might also want to move the zoom behavior down … Read more
Simply replace d3.json call with json = JSON.parse( myjson ); IE: var myjson = ‘{“name”: “flare”,”children”: [{“name”: “analytics”,”children”: [{“name”: “cluster”,”children”: [{“name”: “MergeEdge”, “size”: 10 }]}]}]}’; // d3.json(“/path/flare.json”, function(json) { #delete this line json = JSON.parse( myjson ); //add this line //rendering logic here //} #delete this line UPDATE 09/2013 Original code has changed. So varname … Read more
The filter code is a bit tricky in dc.js. If you specify an array of values, it will not interpret the array as a range. (It will either interpret the array as a single value, or if the array contains another array, it will filter on the values inside that array.) Try specifying a ranged … Read more
Right now, you are appending the text elements to the circle elements, and that simply won’t work. When you write… var label = nodes.append(“svg:text”) You’re appending the texts to the nodesselection. However, you have to keep in mind what nodes is: var nodes = svg.selectAll(“circle”) .data(dataset.nodes) .enter() .append(“circle”) Thus, you are appending the texts to … Read more
Yes, you can do this quite easily. The key is to use nested selections. That is, you pass in your top level list of lists and create a container element for each list. Then you do the nested selection and draw the actual elements. In this particular case, you also need to adjust the radii … Read more
You have a simple typo in your code — coordinates should be passed as (longitude, latitude) to the projection, not the other way round. This code should work fine: svg.selectAll(“.pin”) .data(places) .enter().append(“circle”, “.pin”) .attr(“r”, 5) .attr(“transform”, function(d) { return “translate(” + projection([ d.location.longitude, d.location.latitude ]) + “)”; });
You can animate paths quite easily with stroke-dashoffset and and path.getTotalLength() var totalLength = path.node().getTotalLength(); path .attr(“stroke-dasharray”, totalLength + ” ” + totalLength) .attr(“stroke-dashoffset”, totalLength) .transition() .duration(2000) .ease(“linear”) .attr(“stroke-dashoffset”, 0); http://bl.ocks.org/4063326
The key is to handle all the selections, not just the enter selection: var myGroups = svg.selectAll(‘g’).data(myData); // enter selection var myGroupsEnter = myGroups.enter().append(“g”); myGroupsEnter.append(“line”); myGroupsEnter.append(“polygon”); // … // update selection — this will also contain the newly appended elements myGroups.select(“line”).attr(…); // … // exit selection myGroups.exit().remove(); There are two things here that warrant further … Read more
In fact, the original visualization is a prime example of one method to show multiple links between nodes, that is – using arcs rather than direct paths, so you can see both incoming and outgoing links. This concept can be extended to show multiple of each of these types of links by changing the radius … Read more
In d3 version 5, you can use Promise.all to load multiple csv files. Example: Promise.all([ d3.csv(“file1.csv”), d3.csv(“file2.csv”), ]).then(function(files) { // files[0] will contain file1.csv // files[1] will contain file2.csv }).catch(function(err) { // handle error here }) More info about loading csv in d3 v5 More info about Promise.all()