Fit The D3js Graph In A Simple Html Page

I am trying to use the example from here, and my files are as follows: index.html

Solution 1:

Your line with the g defined in it, you probably just want to increase the x translation.

g = svg.append("g").attr("transform", "translate(40,0)");

becomes

g = svg.append("g").attr("transform", "translate(60,0)");

This moves the group which contains the entire visualization over some additional pixels. If you want to get clever about it you could actually measure the length of the string "country" and translate by that amount. For example:

const countryText = g.append("g")
                     .attr("class", "node") //apply all the same classes to ensure css rules match
                     .append("text")
                    .text("country");

const width = countryText.node().getComputedTextLength()
g.attr("transform", `translate(${width}, 0)`);

Server Side: A word of warning about measuring strings though. This is only supported in an environment with a browser, which can make server side rendering (or automated tests that use something like Node) very difficult to work with.

Solution 2:

If you look at Bostock's code, you can see that he's appending everything to a group, which is being translated 40 pixels to the right:

g = svg.append("g").attr("transform", "translate(40,0)");

Answer : translate more than that:

g = svg.append("g").attr("transform", "translate(50,0)");

Here is your updated bl.ocks: https://bl.ocks.org/anonymous/c873ba1afc1d58a1ea5a13a093468d39

Share