RVA RVA - 1 year ago 38
Javascript Question

d3.js : changing axis text label with glyphicon

I'm new to d3js and i'm trying to manipulate a simple graph with 2 axis and some rect to show some data.

I've set the range of data to my y axis with some object name. This object has also a type "technical" or "canonical".
I'm trying to replace this "technical" or "canonical" with a bootstrap's glyphicon.

I've tried to replace the datas from the range with a internal text containing the proper glyphicon but without success

//datas is the data structure containing my chart datas.
//objects will be the array use for the domain
var objects = datas.map(function (d) {
return d.object + getExchangeObjectType(d.type);
});

var margin = {top: 40, right: 20, bottom: 200, left: 400},
width = 1200 - margin.left - margin.right,
height = (objects.length*30) - margin.top - margin.bottom;

var canonical = "<span class='glyphicon glyphicon-copyright-mark'></span>";
var technical = "<span class='glyphicon glyphicon-wrench'></span>";

function getExchangeObjectType(type){
if (type == 'Technical')
return technical;
else
return canonical;
}

//datas is the data structure containing my chart datas.
//objects will be the array use for the domain
var objects = datas.map(function (d) {
return d.object + getExchangeObjectType(d.type);
});

var x = d3.scale.ordinal().rangePoints([0, width]);

var y = d3.scale.ordinal().rangeBands([height, 0],.1,.1);

// define x & y axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("top")
.ticks(percents.length)
;

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(objects.length)
;

// define the domain of datas
y.domain(objects);
x.domain(percents);


Here is the svg part:

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");


// draw x axis
svg.append("g")
.attr("class", "x axis")
.call(xAxis)
.selectAll("text")
.attr("x",20)
.style("text-anchor", "end")
;

// draw y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll("text")
.style("text-anchor", "end")
;
svg.selectAll("bar")
.data(datas)
.enter().append("rect")
.style("fill", function (d) { return getColor(d.value);})
.attr("y", function(d){return d.object + getExchangeObjectType(d.type);})
.attr("height", y.rangeBand())
.attr("x", 0 )
.attr("width", function(d) { return ( d.value * width) / 100 ; })
;

RVA RVA
Answer Source

I've found out my solution use the unicode ! I've added my type in the label text and then replace it with an unicode :

.text(function(d){
    var oldText=d.split(":");
    if (oldText[1]=="Canonical")
        return oldText[0]+" \ue194";
    else
        return oldText[0]+" \ue136"
})
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download