html tick label?

[David Kim]

Hello d3-ers,

I am trying to build a chart with ordinal data and
wondering if there is a way to get and display html-formatted strings for tick labels?

y = d3.scale.ordinal().domain(schema).rangeBands([0,h]),
//h is the height of the chart,
//schema is an array that contains the html strings

Then,

            svg.append("svg:g")
                .attr("class", "y axis")
                .call(d3.svg.axis().scale(y).orient('left').tickSize(0).tickPadding(0))
              .selectAll("text")
                .attr("x",150)
                .attr("y", null)
                .attr("dy", 0)
                .attr("text-anchor", null);

The html tags inside tick labels are shown as plain texts.

Thanks for your help in advance~!!

David

[Chris Viau]

The tick values are set using .text() and not .html(). So you could probably rewrite them on the fly. Something like:

 svg.append("svg:g")

    .attr("class", "y axis")

    .call(d3.svg.axis().scale(y).orient('left').tickSize(0).tickPadding(0))

    .selectAll("text")

    .attr("x",150)

    .attr("y", null)

    .attr("dy", 0)

    .attr("text-anchor", null)

    .html(function(d, i){return d;});

[David Kim]

Thank you, Chris.

I ended up with this:

            svg.append("svg:g")
                .attr("class", "y axis")

                .call(d3.svg.axis().scale(y).orient('left').tickSize(0).tickPadding(0).tickFormat(function(d) {return '';}))
              .selectAll("g")              
                .append("svg:foreignObject")
                    .attr("width",tw)
                    .attr("height",th)
                    .attr("x", tx)
                    .attr("y", ty)                    
                .append("xhtml:div")
                    .html(function(schema) {return schema;});

Since the default labels each svg:text gets are not needed any more,
I tried to remove all svg:text nodes under y axis, but,
remove() didn't work. So, dummy svg:text nodes still remain but, the labels themselves
are hidden through tickFormat.

Thanks,
David

[Chris Viau]

Excellent. I forgot about the foreignObject part.