Just add a <rect> as the first painting order item that displays the colour you want. var svg = d3.select(“body”).append(“svg”) .attr(“width”, width + margin.right + margin.left) .attr(“height”, height + margin.top + margin.bottom); svg.append(“rect”) .attr(“width”, “100%”) .attr(“height”, “100%”) .attr(“fill”, “pink”); svg.append(“g”) .attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”);
d3.select(this).node() is the same as just this in the context of a function passed to a D3 selection. You could rework it like this d3.select(this.parentNode).datum() and get the correct value back without having to use the ugly double-underscore property.
If you’re running in a browser, you cannot load local files. But it’s fairly easy to run a dev server, on the commandline, simply cd into the directory with your files, then: python -m SimpleHTTPServer (or python -m http.server using python 3) Now in your browser, go to localhost:3000 (or :8000 or whatever is shown … Read more
You can assign multiple classes to elements by simply separating their names with spaces: d3.selectAll(“.user”).attr(“class”, “user Michael”); But it seems that what you really need is to assign a data property to your elements for which it is much better to use the HTML5 data- attributes. So you could do: d3.selectAll(“.user”).attr(“data-name”, function(d,i) { return “Michael … Read more
Expanding on @robert-longson’s answer, you can use SVG’s elliptical arc commands to make the corners, in conjunction with lineto commands for the straight edges. These are used with path elements. Here’s one possible implementation: // Returns path data for a rectangle with rounded right corners. // The top-left corner is ⟨x,y⟩. function rightRoundedRect(x, y, width, … Read more
If your data is starting out like the example you provided, it’s already nested and d3.nest(). Assuming that the data from your example is nestedData, then your problem is that you need to bind values not value. See below: svg.append(“g”).selectAll(“g”) .data(nestedData) .enter() .append(“g”) .style(“fill”, function(d, i) { return z(i); }) .attr(“transform”, function(d, i) { return … Read more
D3 version 4.9.0 introduced link shapes, which have the same functionality of the old d3.svg.diagonal in D3 v3. According to the API: The link shape generates a smooth cubic Bézier curve from a source point to a target point. The tangents of the curve at the start and end are either vertical, horizontal or radial. … Read more
Since you’re using d3 you need to tell d3 that the div is a html div and not some element in the svg namespace. Try .append(“xhtml:div”)
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
It looks like you are using the wrong selector while updating the axes: svg.selectAll(“g .y.axis”) .call(yAxis); svg.selectAll(“g .x.axis”) .call(xAxis); maybe should read: svg.selectAll(“g.y.axis”) .call(yAxis); svg.selectAll(“g.x.axis”) .call(xAxis);