How can I construct coordinate axes where the origin has a single label?

Question

I wish to plot polynomial functions with d3.js and I am looking for the right solution(which should be simpler than constructing the axes from scratch) on how to construct coordinate axes in 2D where I have a single label for the origin.

Answer 1

D3 axes can be manipulated after they are generated. For instance, you can remove the origin labels by selecting them specifically:

//make default origin labels invisible
svg.selectAll(".axis g text")
    .filter(function(d) {return d==0 ? true : false})
    .style("opacity", 1e-6);

you can then add your own origin label:

//add a custom origin identifier
svg.append("text")
    .attr({
        "class": "origintext",
        "x": -8,
        "y": height + 8,
        "text-anchor": "end",
        "dy": ".71em"
    })
    .text("(0,0)");

see full implementation here: http://jsfiddle.net/kcPEX/1/