It seems that your code properly computes the center of the rect and places the text at that point, except that the text is left aligned. If so, you just need to change the text-anchor property to center the text. That would be: textElements.style(“text-anchor”, “middle”)
All the while I was doing .style(“fill”, “darkOrange”) Then I found out the correct answer is .style(‘fill’, ‘darkOrange’)
I think you’ll find it works if you assign font-size as a style rather than as an attribute. .style(“font-size”, “34px”) (better yet, assign an id or class attribute and set all your styles in CSS)
You need to use the proper Unicode inside a normal text element, and then set the font-family to “FontAwesome” like this: node.append(‘text’) .attr(‘font-family’, ‘FontAwesome’) .attr(‘font-size’, function(d) { return d.size+’em’} ) .text(function(d) { return ‘\uf118’ }); This exact code will render an “icon-smile” icon. The unicodes for all FontAwesome icons can be found here: http://fortawesome.github.io/Font-Awesome/cheatsheet/ Be … Read more
Since you already know where you want to break the text, you could consider just adding separate elements. .append(“text”) .attr(“dy”, “0em”) .text(“line 1”) // “line 1” or whatever value you want to add here. And then for the second line, just add an offset .append(“text”) .attr(“dy”, “1em”) // you can vary how far apart it … Read more
The D3 v4 API is here. According to the changelog: D3 4.0 provides default styles and shorter syntax. In place of d3.svg.axis and axis.orient, D3 4.0 now provides four constructors for each orientation: d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft. Therefore, those lines should be: var xAxis = d3.axisBottom(xRange).tickFormat(function(d){ return d.x;}); var yAxis = d3.axisLeft(yRange); PS: I’m assuming … Read more
In my opinion, the force layout is unsuitable for the purpose of placing labels on a map. The reason is simple — labels should be as close as possible to the places they label, but the force layout has nothing to enforce this. Indeed, as far as the simulation is concerned, there is no harm … Read more
The element.getBoundingClientRect() method will return the proper coordinates of an element relative to the viewport regardless of whether the svg has been scaled and/or translated. See this question and answer. While getBBox() works for an untransformed space, if scale and translation have been applied to the layout then it will no longer be accurate. The … Read more
Found a solution. Appending .forceY([0,100]) to the instantiation of the chart forces the axis to take on the range specified in the array. From the example here http://nvd3.org/livecode/#codemirrorNav Appending .forceY([0,100]) to the chart variable works.