To use Renderer, you need the raw HTML element (aka nativeElement). So basically you have to use whatever your library is, get the raw element and pass it to Renderer. For example // h3[0][0] contains the raw element var h3 = d3.select(this.el.nativeElement).select(‘h3’); this.renderer.setElementStyle(h3[0][0], ‘background-color’, ‘blue’); The warning about ElementRef is about using it directly. That … Read more
A rect can’t contain a text element. Instead transform a g element with the location of text and rectangle, then append both the rectangle and the text to it: var bar = chart.selectAll(“g”) .data(data) .enter().append(“g”) .attr(“transform”, function(d, i) { return “translate(0,” + i * barHeight + “)”; }); bar.append(“rect”) .attr(“width”, x) .attr(“height”, barHeight – 1); … Read more
Update 6/4/14 See also Mike Bostock’s answer here for changes in D3 v.3 and the related example. I think this probably supersedes the answer below. Update 2/18/2014 I think @ahaarnos’s answer is preferable if you want the entire SVG to pan and zoom. The nested g elements in my answer below are really only necessary … Read more
You can use selection.insert(newElement[, anotherExistingElement]) For example: selection.insert(“div”,”:first-child”) The above code will insert a div before the first child of selected element. Check documentation to learn more. Another possible way of inserting elements before any node (including plain texts): var parentEl = d3.select(“div”).node(); parentEl.insertBefore(document.createElement(“div”), parentEl.childNodes[0]); <script src=”https://d3js.org/d3.v3.min.js”></script> <div> This is a plain text <a></a> </div>
If you set a transform of rotate(180), it rotates the element relative to the origin, not relative to the text anchor. So, if your text elements also have an x and y attribute set to position them, it’s quite likely that you’ve rotated the text off-screen. For example, if you tried, <text x=”200″ y=”100″ transform=”rotate(180)”>Hello!</text> … Read more
I’ve done a fair amount of work with Protovis and a few things with D3. In addition to the points you mention, I think the following differences stand out for me: Where Protovis provides a simplified abstraction layer between the visual properties you’re specifying, D3 uses the actual CSS and DOM specs – so instead … Read more
Instead of d3.scale.category10() use d3.scaleOrdinal(d3.schemeCategory10); Create a color scale like this: var color = d3.scaleOrdinal(d3.schemeCategory10); use the color like this in the code same as in V3: svg.append(“rect”) .attr(“x”, 10) .attr(“y”, 10) .attr(“width”, 100) .attr(“height”, 100) .style(“fill”, color(3)) read here Reference here working code here
After many long hours of being unable to get this working, I finally stumbled across a demo that I don’t think is linked any of the documentation: http://bl.ocks.org/1095795: This demo contained the keys which finally helped me crack the problem. Adding multiple objects on an enter() can be done by assigning the enter() to a … Read more
First, .forEach() is not part of d3, it’s a native function of javascript arrays. So, [“a”, “b”, “c”].forEach(function(d, i) { console.log(d + ” ” + i); }); // Outputs: a 0 b 1 c 2 And that works even if d3 is not loaded on the page. Next, d3’s .each() works on d3 selections (what … Read more
I think the trick here is to understand that xAxis is a function that generates a bunch of SVG elements. In fact it is the function returned by d3.svg.axis(). The scale and orient functions are just part of the chaining syntax (read more of that here: http://alignedleft.com/tutorials/d3/chaining-methods/). So svg.append(“g”) appends an SVG group element to … Read more