COMPLETE SOLUTION: Here’s the solution which will resize the map AFTER the user has released the edge of the window to resize it, and center it in the parent container. <div id=”mapContainer”></div> function draw(ht) { $(“#mapContainer”).html(“<svg id=’map’ xmlns=”http://www.w3.org/2000/svg” width=”100%” height=”” + ht + “”></svg>”); map = d3.select(“svg”); var width = $(“svg”).parent().width(); var height = ht; … Read more
can I create a flowchart like this one? D3 is capable of doing it. starting form a json object using the D3.js library? Yes What should the json structure look like? Depends on how you approach the project. I’m using force layout and removing the force, so my JSON is {node: [{ id: 1, title: … Read more
A D3 selection is just a double-array wrapped around the element(s) selected. As you found with p3, you can dereference the arrays to find your first node, if you want. However, a better method does exist: From the docs for selection.node(): Returns the first non-null element in the current selection. If the selection is empty, … Read more
Update Angular and SASS agreed on supporting ::ng-deep (instead of >>> or /deep/) a while ago until ::slotted or whatever makes it into browser standards becomes available in all browsers. ViewEncapsulation.Emulated (default) That’s by design. Angular adds class names unique to components and rewrites the added styles to only apply to the components where they … Read more
The most D3 way to do this would be to chain the selectors using the filter method: var list1 = d3.selectAll(“.mYc”).filter(“.101″); This won’t work though because class names cannot start with a number. So you have to rename to something like “a101” and then you can do var list1 = d3.selectAll(“.mYc”).filter(“.a101”); See this fiddle.
D3v4 answer If you are here looking for the same but with D3 v4, var zoom = d3.zoom().on(“zoom”, function(){ svg.attr(“transform”, d3.event.transform); }); vis = svg.append(“svg:svg”) .attr(“width”, width) .attr(“height”, height) .call(zoom) // here .call(zoom.transform, d3.zoomIdentity.translate(100, 50).scale(0.5)) .append(“svg:g”) .attr(“transform”,”translate(100,50) scale(.5,.5)”);
The example you give are for testing the graphical output. For this you can use a screenshot diff tool like PhantomCSS, Sikuli or roll-up your own with Resemble.js. But if your question is more genrally about testing D3.js/SVG-based apps, as the title implies, you should look at the D3 test suite. Most tests don’t even … Read more
It is quite easy, just add some more “key” : “value” pairs. Example: “children”: [ { “name”: “Google”, “size”: 3938, “url”: “https://www.google.com” }, { “name”: “Bing”, “size”: 3938, “url”: “http://www.bing.com” } ] Of course, in your d3 code you then need to append <svg:a> tags and set their xlink:href attribute. Here is some html and … Read more
To find the width of the band in a band scale you have to use: scale.bandwidth(); According to the API, bandwidth(): Returns the width of each band. Here is a demo: var scale = d3.scaleBand() .domain([“foo”, “bar”, “baz”, “foobar”, “foobaz”]) .range([0, 100]); console.log(“The width of each band is ” + scale.bandwidth() + ” pixels”) <script … Read more
No. The purpose of the data-join is to synchronize elements with data, creating, removing or updating elements as necessary. If you create elements twice, the elements will no longer correspond one-to-one with the bound array of data. If you want two elements to correspond to each datum, then append a group (G) element first to … Read more